实现div内部滚动条滚动到底部和顶部的代码


Posted in Javascript onNovember 15, 2017

实例如下所示:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.scrolldiv{
			width: 500px;
			height: 400px;
			margin: 10px auto;
			background: #f00;
			overflow-y: scroll;
			padding: 10px;
		}
	</style>
</head>
<body>
<div class="scrolldiv" id="testDiv">
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<script type="text/javascript">
	var divscroll=document.getElementById('testDiv');
	function divScroll(){
		var scrollTop=divscroll.scrollTop;//页面上卷的高度
		var wholeHeight=divscroll.scrollHeight;//页面底部到顶部的距离
		var divHeight=divscroll.clientHeight;//页面可视区域的高度
		if(scrollTop+divHeight>=wholeHeight){
			alert('我到底部了');
		}
		if(scrollTop==0){
			alert('我到顶部了');
		}
	}
	divscroll.onscroll=divScroll;
</script>
</body>
</html>

以上这篇实现div内部滚动条滚动到底部和顶部的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 #Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 #Javascript
判断div滑动到底部的scroll实例代码
Nov 15 #Javascript
Vue.js实现列表清单的操作方法
Nov 15 #Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 #Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
php字符串操作常见问题小结
2016/10/11 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Vue插槽原理与用法详解
2019/03/05 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python距离测量的方法
2018/03/06 Python
python实现图片批量压缩程序
2018/07/23 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
优秀应届毕业生推荐信
2014/02/18 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
行政复议决定书
2015/06/24 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
python的html标准库
2022/04/29 Python