实现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 相关文章推荐
jquery索引在使用中的一些困惑
Oct 24 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
ES6的解构赋值实例详解
May 06 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
德劲1103二次变频版的打磨
2021/03/02 无线电
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JS写滑稽笑脸运动效果
2020/05/28 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python中一行和多行import模块问题
2018/04/01 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python笔试面试题小结
2019/09/07 Python
信号生成及DFT的python实现方式
2020/02/25 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
三年级科学教学反思
2014/01/29 职场文书
优秀幼教自荐信
2014/02/03 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
倡议书作文
2015/01/19 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技