实现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代码)
Apr 11 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
JavaScript实现简单的音乐播放器
Aug 14 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
javascript基础知识
2016/06/07 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python列表(List)知识点总结
2019/02/18 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
写自荐信要注意什么
2013/12/26 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
婚前协议书标准版
2014/10/19 职场文书
Python中异常处理用法
2021/11/27 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis