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('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>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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
