实现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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
JavaScript门道之标准库
May 26 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
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
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python解析xml文件操作实例
2014/10/05 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
2015年生产车间工作总结
2015/04/22 职场文书
纪检监察立案决定书
2015/06/24 职场文书
同学聚会祝酒词
2015/08/10 职场文书
创业计划书之面包店
2019/09/12 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js