实现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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
会计电算化应届生求职信
2013/11/03 职场文书
经典大学生求职信范文
2014/01/06 职场文书
优秀求职信
2014/05/29 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android