欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

div内部滚动条滚动到底部和顶部功能的实现

程序员文章站 2022-04-23 09:50:53
...
关于div内部滚动条滚动到底部和顶部功能的实现,本文就为大家分享一篇实现p内部滚动条滚动到底部和顶部的代码,代码简洁,具有很好的参考价值,希望能帮助到大家。

实例如下所示:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.scrollp{
			width: 500px;
			height: 400px;
			margin: 10px auto;
			background: #f00;
			overflow-y: scroll;
			padding: 10px;
		}
	</style>
</head>
<body>
<p class="scrollp" id="testp">
	<br><br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
	var pscroll=document.getElementById('testp');
	function pScroll(){
		var scrollTop=pscroll.scrollTop;//页面上卷的高度
		var wholeHeight=pscroll.scrollHeight;//页面底部到顶部的距离
		var pHeight=pscroll.clientHeight;//页面可视区域的高度
		if(scrollTop+pHeight>=wholeHeight){
			alert('我到底部了');
		}
		if(scrollTop==0){
			alert('我到顶部了');
		}
	}
	pscroll.onscroll=pScroll;
</script>
</body>
</html>

大家学会了吗?思路都是一样的赶紧动手尝试一下吧。

相关推荐:

基于滚动条位置判断的简单实例_javascript技巧

设置DIV滚动条属性与样式的方式介绍

javaScript滚动条事件的实例详解

以上就是div内部滚动条滚动到底部和顶部功能的实现的详细内容,更多请关注其它相关文章!