当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 实现div内部滚动条滚动到底部和顶部的代码

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

2017年11月17日  | 移动技术网IT编程  | 我要评论
实例如下所示: <!doctype html> <html> <head> <title></tit

实例如下所示:

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网