js determines whether the scroll bar has reached the bottom or top of the page_javascript skills

The example in this article describes the js method to determine whether the scroll bar has reached the bottom or top of the page. Share it with everyone for your reference. The specific analysis is as follows:

We often see a return to the top effect on many websites. When our scroll bar reaches the specified position, the return to the top appears. Otherwise, it will be automatically hidden. Here we will introduce to you the principle and method of realizing 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:

Copy code The code is as follows:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true ;

To use document.documentElement , you must add the declaration at the head of the page:

Copy code The code is as follows:

In fact, this code does not work because it does not take into account one issue, which is the browser's border. When we get the offsetHeight of the page, the browser's border is included. The browser's border is 2 pixels, so clientHeight is always less than offsetHeight under any circumstances, which makes it true even if there is no scroll bar, so we need to correct this error. The code should be changed like this, subtract 4 pixels from offsetHeight, That is:

Copy code The code is as follows:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//Execute related scripts.
}

Also, we need to understand here that the above code is to judge the horizontal scroll bar. What we generally need to judge is the vertical scroll. The code is as follows:

Copy code The code is 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 code The code is 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

Found it online. It's quite browser compatible. The strange thing is that I couldn't find any relevant information in the documentation. Post the code.

Copy code The code is as follows:

/********************
* Get the height of the window scroll bar
******************/
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;
}

/********************
* Get the height of the visible range of the window
*******************/
function getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     }
    else
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    return clientHeight;
}
/********************
* Get 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("到达底部");
 }else{
  alert("没有到达底部");
 }
}

Supplement:

DTD declared:

IE
document.documentElement.scrollHeight The height of all content in the browser, document.body.scrollHeight The height of all content in the browser
document.documentElement.scrollTop The height of the scroll part of the browser, document.body.scrollTop is always 0
document.documentElement.clientHeight The height of the visible part of the browser, document.body.clientHeight The height of all content in the browser

FF
document.documentElement.scrollHeight The height of all content in the browser, document.body.scrollHeight The height of all content in the browser
document.documentElement.scrollTop The height of the scroll part of the browser, document.body.scrollTop is always 0
document.documentElement.clientHeight is the height of the visible part of the browser, document.body.clientHeight is the height of all content in the browser

Chrome
document.documentElement.scrollHeight is the height of all content in the browser, document.body.scrollHeight is the height of all content in the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop height of the browser scrolling part
document.documentElement.clientHeight The height of the visible part of the browser, document.body.clientHeight The height of all content in the browser

DTD not declared:

IE
document.documentElement.scrollHeight is the height of the visible part of the browser, document.body.scrollHeight is the height of all content in the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop height of the browser scrolling part
document.documentElement.clientHeight is always 0, document.body.clientHeight is the height of the visible part of the browser

FF
document.documentElement.scrollHeight is the height of the visible part of the browser, document.body.scrollHeight is the height of all content in the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop is the height of the browser scrolling part
document.documentElement.clientHeight is the height of all content in the browser, document.body.clientHeight is the height of the visible part of the browser

Chrome
document.documentElement.scrollHeight is the height of the visible part of the browser, document.body.scrollHeight is the height of all content in the browser
document.documentElement.scrollTop is always 0, document.body.scrollTop is the height of the browser scrolling part
document.documentElement.clientHeight is the height of all content in the browser, document.body.clientHeight is the height of the visible part of the browser

The height of all content in the browser is the height of the entire frame of the browser, including the sum of the heights of the part where the scroll bar is rolled out, the visible part, and the hidden part at the bottom

The height of the scrolled part of the browser is the height of the scroll bar, which is the height of the visual top from the top of the entire object.
After understanding the above parameters, we can create a scrolling effect compatible with IE, FF, and Chrome browsers.

I hope this article will be helpful to everyone’s JavaScript programming design.