首頁 >web前端 >js教程 >div內部捲軸滾動到底部和頂部功能的實現

div內部捲軸滾動到底部和頂部功能的實現

小云云原創: 2017-12-21 09:31:563947瀏覽

關於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(&#39;testp&#39;);
	function pScroll(){
		var scrollTop=pscroll.scrollTop;//页面上卷的高度
		var wholeHeight=pscroll.scrollHeight;//页面底部到顶部的距离
		var pHeight=pscroll.clientHeight;//页面可视区域的高度
		if(scrollTop+pHeight>=wholeHeight){
			alert(&#39;我到底部了&#39;);
		}
		if(scrollTop==0){
			alert(&#39;我到顶部了&#39;)；
		}
	}
	pscroll.onscroll=pScroll;
</script>
</body>
</html>

大家學會了嗎？思路都是一樣的趕快動手嘗試。

div內部捲軸滾動到底部和頂部功能的實現

相關文章