Implementation of the function of scrolling the scroll bar inside the div to the bottom and top-JS Tutorial-php.cn

Implementation of the function of scrolling the scroll bar inside the div to the bottom and top

小云云

Release： 2017-12-21 09:31:56

Original

3926 people have browsed it

Regarding the implementation of the function of scrolling the internal scroll bar of div to the bottom and top, this article will share with you a code to implement the internal scroll bar of p to scroll to the bottom and top. The code is concise and has good reference value. I hope it can help. to everyone.

The example is as follows:

<!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>

Copy after login

Have you learned it? The idea is the same, so hurry up and give it a try.

Related recommendations:

Simple example based on scroll bar position judgment_javascript skills

Set DIV scroll bar attributes and Introduction to style methods

detailed examples of javaScript scroll bar events

The above is the detailed content of Implementation of the function of scrolling the scroll bar inside the div to the bottom and top. For more information, please follow other related articles on the PHP Chinese website!