Js example of checking whether the scroll bar has reached the bottom/top of the page

We can see that many websites return the top result when the scroll bar reaches the specified position. Otherwise, it will be automatically hidden, next, I will introduce the Implementation Principles and Examples of 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 is as follows:	Copy code
If (document.doc umentElement. clientHeight <document.doc umentElement. offsetHeight) scroll = true;

To use document.doc umentElement, you must add a declaration to the page header:

The Code is as follows:	Copy code
<! 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 he did not consider a problem, that is, the browser border. When we get the offsetHeight height of the page, it includes the border of the browser, the browser's border is 2 pixels, so clientHeight is always less than offsetHeight in any case, which makes it true even if there is no scroll bar, so we need to correct this error, the Code should be changed as follows: subtract 4 pixels from offsetHeight, that is:

The Code is as follows:	Copy code
If (document.doc umentElement. clientHeight <document.doc umentElement. offsetHeight-4 ){ // Execute the script. }

Also, we need to clarify that the above code is used to judge the horizontal scroll bar. We generally need to judge the vertical scroll. The Code is as follows:

 

The Code is as follows:	Copy code
If (document.doc umentElement. clientWidth <document.doc umentElement. offsetWidth-4 ){ // Execute the script. }

Use the following code to determine whether the scroll bar has been pulled to the bottom of the page:

The Code is as follows:	Copy code
Window. onscroll = function (){ Var marginBot = 0; If (document.doc umentElement. scrollTop ){ MarginBot = document.doc umentElement. scrollHeight-(document.documentElement.scrollTop+document.body.scrollTop)-document.doc umentElement. clientHeight; } Else { MarginBot = document. body. scrollHeight-document. body. scrollTop-document. body. clientHeight; } If (marginBot <= 0 ){ // Do something } }

Example 2

Found online. It is quite compatible with browsers. The strange thing is that I did not find the relevant information in the document. Paste the code.

The Code is as follows:

Copy code

/******************** * Take the height of the window scroll bar ******************/ Function getScrollTop () { Var scrollTop = 0; If(document.documentelement&document.doc umentElement. scrollTop) { ScrollTop=document.doc umentElement. scrollTop; } Else if (document. body) { ScrollTop = document. body. scrollTop; } Return scrollTop; } /******************** * Take the height of the visible window range *******************/ Function getClientHeight () { Var clientHeight = 0; If(document.body.clientheight&document.doc umentElement. clientHeight) { Var clientHeight = (document. body. clientHeight <document.doc umentElement. clientHeight )? Document. body. clientHeight: document.doc umentElement. clientHeight; } Else { Var clientHeight = (document. body. clientHeight> document.doc umentElement. clientHeight )? Document. body. clientHeight: document.doc umentElement. clientHeight; } Return clientHeight; } /******************** * Take the actual height of the Document Content *******************/ Function getScrollHeight () { Return Math.max(document.body.scrollHeight,document.doc umentElement. scrollHeight ); } Function test (){ If (getScrollTop () + getClientHeight () = getScrollHeight ()){ Alert ("reaching the bottom "); } Else { Alert ("not reaching the bottom "); } }

Add

DTD declared
IE
Document.doc umentElement. scrollHeight all content height in the browser, and all content height in the document. body. scrollHeight Browser
Document.doc umentElement. scrollTop: Specifies the height of the scroll part of the browser. document. body. scrollTop is always 0.
Document.doc umentElement. The height of the visible part of the clientHeight browser, and the height of all content of the document. body. clientHeight Browser
FF
Document.doc umentElement. scrollHeight all content height in the browser, and all content height in the document. body. scrollHeight Browser
Document.doc umentElement. scrollTop: Specifies the height of the scroll part of the browser. document. body. scrollTop is always 0.
Document.doc umentElement. The height of the visible part of the clientHeight browser, and the height of all content of the document. body. clientHeight Browser
Chrome
Document.doc umentElement. scrollHeight all content height in the browser, and all content height in the document. body. scrollHeight Browser
Document.doc umentElement. scrollTop is always 0, and the height of the scroll part of document. body. scrollTop Browser
Document.doc umentElement. The height of the visible part of the clientHeight browser, and the height of all content of the document. body. clientHeight Browser

DTD not declared
IE
Document.doc umentElement. scrollHeight the visible part height of the browser and the height of all content of the document. body. scrollHeight browser.
Document.doc umentElement. scrollTop is always 0, and the height of the scroll part of document. body. scrollTop Browser
Document.doc umentElement. clientHeight is always 0. The visible part height of document. body. clientHeight Browser
FF
Document.doc umentElement. scrollHeight the visible part height of the browser and the height of all content of the document. body. scrollHeight browser.
Document.doc umentElement. scrollTop is always 0, and the height of the scroll part of document. body. scrollTop Browser
Document.doc umentElement. clientHeight the height of all content in the browser. The height of the visible part of the document. body. clientHeight Browser
Chrome
Document.doc umentElement. scrollHeight the visible part height of the browser and the height of all content of the document. body. scrollHeight browser.
Document.doc umentElement. scrollTop is always 0, and the height of the scroll part of document. body. scrollTop Browser
Document.doc umentElement. clientHeight the height of all content in the browser. The height of the visible part of the document. body. clientHeight Browser

The height of all content in the browser is the height of the entire browser framework, including the height of the scroll bar, the visible part, and the hidden part at the bottom.

The height of the scroll part of the browser, that is, the height from the visible top to the top of the entire object.

After reading the above parameters, we can make the scrolling effect compatible with ie, ff, and chrome.