This article describes the method of JS to determine whether the scroll bar has reached the bottom or top of the page. Share it for your reference. The specific analysis is as follows:
We often see many websites returning to the top effect is that when we scroll the bar to the specified position, it will come back to the top, otherwise it will be automatically hidden. Let me introduce the principles and methods of implementing this effect.
When the visible area is smaller than the actual height of the page, it is determined that a scroll bar appears, that is:
The code copy is as follows: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;
To use document.documentElement, you must add a declaration at the head of the page:
Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In fact, this code does not work because it did not consider a problem, that is, the browser border. When we get the offsetHeight height of the page, it includes the browser border. The browser border is 2 pixels, so in any case, clientHeight is always smaller than offsetHeight, which makes it true even without a scroll bar. Therefore, we need to correct this error. The code should be changed like this and subtract 4 pixels on offsetHeight, that is:
Copy the code code as follows: if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//Execute related scripts.
}
Also, we need to figure it out here that the above code judges the horizontal scroll bar. We generally need to judge the vertical scroll, the code is as follows:
Copy the code as follows: if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//Execute related scripts.
}
To determine whether the scroll bar has been pulled to the bottom of the page, you can use the following code
Copy the code as follows: window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
Example 2
Looking for it online. Very browser compatible. Strangely, I didn't find any relevant information in the document. Post the code.
Copy the code as follows:/************************
* Take the window scroll bar height
************************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
/***************************
* Take the height of the window's visual range
***************************/
function getClientHeight()
{
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
/***************************
* Take the actual height of the document content
***************************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test(){
if (getScrollTop()+getClientHeight()==getScrollHeight()){
alert("reach the bottom");
}else{
alert("Not reached the bottom");
}
}
Replenish:
DTD has declared:
IE
document.documentElement.scrollHeight All content height of the browser, document.body.scrollHeight All content height of the browser
document.documentElement.scrollTop The browser scrolls part height, document.body.scrollTop is always 0
document.documentElement.clientHeight The browser's visible part height, document.body.clientHeight The browser's content height
FF
document.documentElement.scrollHeight All content height of the browser, document.body.scrollHeight All content height of the browser
document.documentElement.scrollTop The browser scrolls part height, document.body.scrollTop is always 0
document.documentElement.clientHeight The browser's visible part height, document.body.clientHeight The browser's content height
Chrome
document.documentElement.scrollHeight All content height of the browser, document.body.scrollHeight All content height of the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop browser scrolling part height
document.documentElement.clientHeight The browser's visible part height, document.body.clientHeight The browser's content height
DTD not declared:
IE
document.documentElement.scrollHeight The height of the browser's visible part, document.body.scrollHeight The height of all content of the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop browser scrolling part height
document.documentElement.clientHeight is always 0, document.body.clientHeight The browser's visible part height
FF
document.documentElement.scrollHeight The height of the browser's visible part, document.body.scrollHeight The height of all content of the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop browser scrolling part height
document.documentElement.clientHeight The height of all content of the browser, document.body.clientHeight The height of the browser's visible part
Chrome
document.documentElement.scrollHeight The height of the browser's visible part, document.body.scrollHeight The height of all content of the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop browser scrolling part height
document.documentElement.clientHeight The height of all content of the browser, document.body.clientHeight The height of the browser's visible part
The height of all content of the browser is the height of the entire browser framework, including the sum of the height of the scroll bar rolling part + the visual part + the hidden part at the bottom
The height of the browser scrolls part is that of the scroll bar rolls out part of the height to see the height of the top of the entire object.
After understanding the above parameters, we can create a scrolling effect that is compatible with ie, ff, and chrome browsers.
I hope this article will be helpful to everyone's JavaScript programming.