首页 > 开发 > JS > 正文

实现div内部滚动条滚动到底部和顶部的代码

2024-05-06 16:40:55
字体:
来源:转载
供稿:网友

实例如下所示:

<!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内部滚动条滚动到底部和顶部的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表