实现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 相关文章推荐
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
安装vue-cli的简易过程
May 22 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
use jscript List Installed Software
2007/06/11 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
C#面试常见问题
2013/02/25 面试题
英文自荐信
2013/12/19 职场文书
教师师德承诺书
2014/03/26 职场文书
开学典礼演讲稿
2014/05/23 职场文书
商务经理岗位职责
2014/07/30 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
Go语言grpc和protobuf
2022/04/13 Golang