实现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类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python的Django框架中的Context使用
2015/07/15 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
大学计划书范文800字
2014/08/14 职场文书
房产授权委托书范本
2014/09/22 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
法律进社区活动总结
2015/05/07 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python