实现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 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
用jscript实现新建word文档
Jun 15 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
微信小程序日期选择器实例代码
Jul 18 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
实用函数7
2007/11/08 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
部署Python的框架下的web app的详细教程
2015/04/30 Python
python实现简单购物商城
2016/05/21 Python
深入浅析python继承问题
2016/05/29 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python常用运维脚本实例小结
2020/02/14 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
建筑设计所实习生自我鉴定
2013/09/25 职场文书
中秋晚会策划方案
2014/06/12 职场文书
学习张林森心得体会
2014/09/10 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
学生会辞职信
2015/03/02 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
股东大会通知
2015/04/24 职场文书
七一晚会主持词
2015/06/29 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
利用python做数据拟合详情
2021/11/17 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python