Detailed code example of how to use javascript to determine whether the scroll bar reaches the bottom-JS Tutorial-php.cn

Detailed code example of how to use javascript to determine whether the scroll bar reaches the bottom

伊谢尔伦

Release： 2017-07-19 15:58:47

Original

1229 people have browsed it

To determine whether the scroll bar reaches the bottom, you need to use three attribute values of the DOM, namely scrollTop, clientHeight, and scrollHeight.

scrollTop is the scrolling distance of the scroll bar on the Y axis.

clientHeight is the height of the content visible area.

scrollHeight is the height of the content visible area plus the overflow (scrolling) distance.

It can be seen from the introduction of these three attributes that the condition for the scroll bar to reach the bottom is scrollTop + clientHeight == scrollHeight.

//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}
//文档的总高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("you are in the bottom!");
　　}
};

Copy after login

It will be simpler if you use jquery to implement it.

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("you are in the bottom");
　　}
});

Copy after login

If you want to determine whether the scroll bar in a certain element has reached the bottom, based on a similar idea, replace document.body It can be converted into a specific element. The method of obtaining scrollTop and scrollHeight is the same, but to obtain the visible height of the element, you need to use the offsetHeight attribute, just follow the gourd.

The above is the detailed content of Detailed code example of how to use javascript to determine whether the scroll bar reaches the bottom. For more information, please follow other related articles on the PHP Chinese website!