实现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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
eval的两组性能测试数据
Aug 17 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php常用字符串处理函数实例分析
2014/11/22 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP自定义多进制的方法
2016/11/03 PHP
CI框架附属类用法分析
2018/12/26 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python3基于sax解析xml操作示例
2018/05/22 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
sklearn+python:线性回归案例
2020/02/24 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python3判断IP地址的方法
2021/03/04 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
爽歪歪广告词
2014/03/20 职场文书
捐款倡议书
2014/04/14 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2014年材料员工作总结
2014/11/19 职场文书
竞聘书的秘诀
2019/04/02 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
python turtle绘图命令及案例
2021/11/23 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers