实现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禁止小键盘输入数字功能代码
Aug 01 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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
php检查是否是ajax请求的方法
2015/04/16 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
技能比赛获奖感言
2014/02/14 职场文书
安踏广告词改编版
2014/03/21 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
苏州园林导游词
2015/02/03 职场文书
销售员岗位职责
2015/02/10 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
安全教育观后感
2015/06/17 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL