Js determines whether the scroll bar has reached the bottom or top instance of the page

  • 2020-03-30 04:21:19
  • OfStack

This article illustrates how js determines whether a scrollbar is at the bottom or top of a page. Share with you for your reference. Specific analysis is as follows:

We often see a lot of websites a return to the top effect is when we scroll to the specified position return to the top out, otherwise automatically hidden, the following to give you the implementation of this effect principle and method.

When the visual area is smaller than the actual height of the page, it is judged as a scroll bar, that is:

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

To use the document.documentelement, you must include a declaration in the header of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
In fact, this is the code doesn't work, because he didn't consider a problem, is the browser frame, when we were in for page offsetHeight height is include the border around the browser, the browser frame is 2 pixels, so at this time in any case clientHeight is always less than offsetHeight, making it even without scrolling it is true, so we have to fix this error, the code should be changed, minus four pixels on offsetHeight, namely:
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//Execute the script. < br / > }

Also, to be clear, the above code is to judge the horizontal scroll bar, we usually want to determine the vertical scroll, the code is as follows:
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//Execute the script. < br / > }

To determine whether the scroll bar has been pulled to the bottom of the page, use the following code

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

I found it online. It's pretty browser-compatible. Strangely, I didn't find any information in the document. Post the code.

/********************
* Takes 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;
} /********************
* Takes the height of the window's viewscope
*******************/
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;
}
/********************
* Takes 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 reaching the bottom ");
 }
}

Supplement:

DTD has declared:

IE
Document. The documentElement. ScrollHeight  The browser all content height, the document. The body. ScrollHeight  Browser all content height
Document. The documentElement. ScrollTop  The height of the browser scroll section, document.body.scrolltop is always 0
Document. The documentElement. ClientHeight  Browser visible part height, document. Body. ClientHeight  Browser all content height

FF
Document. The documentElement. ScrollHeight  The browser all content height, the document. The body. ScrollHeight  Browser all content height
Document. The documentElement. ScrollTop  The height of the browser scroll section, document.body.scrolltop is always 0
Document. The documentElement. ClientHeight browser visible part height, document. Body. ClientHeight  Browser all content height

Chrome
Document. The documentElement. ScrollHeight  The browser all content height, the document. The body. ScrollHeight  Browser all content height
Document. The documentElement. ScrollTop always is 0, the document. The body. ScrollTop  Browser scrolling section height
Document. The documentElement. ClientHeight  Browser visible part height, document. Body. ClientHeight  Browser all content height

DTD not declared:

IE
Document. The documentElement. ScrollHeight  Browser visible part height, document. Body. ScrollHeight  Browser all content height
Document. The documentElement. ScrollTop always is 0, the document. The body. ScrollTop  Browser scrolling section height
Document. The documentElement. ClientHeight always is 0, the document. The body. ClientHeight  Height of the visible part of the browser

FF
Document. The documentElement. ScrollHeight  Browser visible part height, document. Body. ScrollHeight browser all content height
Document. The documentElement. ScrollTop always is 0, the document. The body. The scrollTop browser scroll section height
All the document. The documentElement. ClientHeight browser content high, the document. The body. The clientHeight browser highly visible parts

Chrome
Document. The documentElement. ScrollHeight browser height of visible part, document. Body. All content height scrollHeight browsers
Document. The documentElement. ScrollTop always is 0, the document. The body. The scrollTop browser scroll section height
All the document. The documentElement. ClientHeight browser content high, the document. The body. The clientHeight browser highly visible parts

The height of all the content in the browser is the height of the entire frame of the browser, including the sum of the scrollbar volume part + the visible part + the hidden part at the bottom

The browser scrolls part of the height, that is, the scroll bar rolls away part of the height to see the height of the top from the top of the entire object.
By understanding the above parameters, we can make the scrolling effect compatible with Internet explorer,ff and chrome browsers.


Related articles: