div內部捲軸滾動到底部和頂部功能的實現
- 小云云原創
- 2017-12-21 09:31:563884瀏覽
關於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內部捲軸滾動到底部和頂部功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：實例詳解Js判斷H5上下滑動方向下一篇：實例詳解Js判斷H5上下滑動方向