search

Home  >  Article  >  Web Front-end  >  Implementation of the function of scrolling the scroll bar inside the div to the bottom and top

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

小云云
小云云Original
2017-12-21 09:31:563937browse

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed example of Js judging the up and down sliding direction of H5Next article：Detailed example of Js judging the up and down sliding direction of H5

Related articles

See more