实现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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 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获取MAC地址的函数代码
2011/09/11 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
django框架模板语言使用方法详解
2019/07/18 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
sort命令的作用和用法
2013/08/25 面试题
事务机电主管工作职责
2014/02/25 职场文书
教堂婚礼主持词
2014/03/14 职场文书
访谈节目策划方案
2014/05/15 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书