div内部滚动条滚动到底部和顶部功能的实现
程序员文章站
2022-04-14 10:24:23
...
关于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内部滚动条滚动到底部和顶部功能的实现的详细内容，更多请关注其它相关文章！