Javascript code used to determine whether the scroll bar has reached the bottom or top of the page _ javascript tips

This article mainly introduces the principle and method of js to determine whether the scroll bar has reached the bottom or top of the page, and analyzes in detail various techniques involved in js's function of returning to the top of the page in the form of an instance, and summarized the relevant knowledge points. If you need a friend, you can refer to the example in this article to describe how js judges whether the scroll bar has reached the bottom or top of the page. Share it with you for your reference. The specific analysis is as follows:

We often see that many websites return the top result when the scroll bar reaches the specified position. Otherwise, it is automatically hidden, the following describes the implementation principles and methods 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:

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:

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:

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:

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:

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:

/********************
* 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 }
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 ");
}
}

Supplement:

The DTD has been 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 is 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.

I hope this article will help you design javascript programs.