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

来源：动视网责编：小OO 时间：2020-11-27 20:09:59

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

实例如下所示。<；<。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>；<。

推荐度：

点击下载本文 文档为doc格式

导读实例如下所示。<；<。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>；<。

关于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>

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

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

推荐度：

点击下载本文 文档为doc格式

标签：底部滚动条 div

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐