JS to determine if the scroll bar has been to the bottom of the page/top sample

When the viewable area is less than the actual height of the page, it is determined that the scroll bar appears:

The code is as follows	Copy Code
if (Document.documentElement.clientHeight < document.documentElement.offsetHeight) Scroll = true;

To use Document.documentelement, 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's border, when we get the offsetheight height of the page is included in the browser's border, the browser's border is 2 pixels, so at this time regardless of the clientheight is always less than offsetheight, which makes it true even if there is no scroll bar, so we're going to fix the error, and the code should be changed to subtract 4 pixels on the offsetheight, namely:

The code is as follows	Copy Code
if (Document.documentElement.clientHeight < document.documentelement.offsetheight-4) { Executes the related script. }

And, to be clear, the above code is to judge the horizontal scroll bar, we generally have to judge the vertical scrolling, the code is as follows:

The code is as follows	Copy Code
if (Document.documentElement.clientWidth < document.documentelement.offsetwidth-4) { Executes the related script. ｝

To determine if the scroll bar has been dragged to the bottom of the page, you can use the following code

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

Look for it on the Internet. Also quite compatible with browsers. It's strange that I didn't find any information in the document. Code post it.

The code is as follows

Copy Code

/******************** * 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 Bottom"); }else{ Alert ("Not reaching Bottom"); } }

Add

DTD has declared
IE
document.documentelement.scrollheight  Browser All content height, document.body.scrollheight  Browser All content height
document.documentelement.scrolltop  Browser scrolling part height, Document.body.scrollTop is always 0
document.documentelement.clientheight  browser visual portion height, document.body.clientHeight   Browser All content height
FF
document.documentelement.scrollheight  Browser All content height,document.body.scrollheight  Browser All content height
document.documentelement.scrolltop  Browser scrolling part height, Document.body.scrollTop always 0
Document.documentElement.clientHeight Browser Visual Part height,document.body.clientheight  browser All content height
Chrome
document.documentelement.scrollheight  Browser All content height, document.body.scrollheight  browser all content height
Document.documentElement.scrollTop always scrolls the portion height for the 0,document.body.scrolltop  browser
document.documentelement.clientheight  Browser Visual Part height,document.body.clientheight  browser all content height

DTD not declared
IE
Document.documentElement.scrollHeight Browser Visual part height, document.body.scrollHeight browser all content height
Document.documentElement.scrollTop always scrolls part height for 0,document.body.scrolltop browser
Document.documentElement.clientHeight always a visual portion of the 0,document.body.clientheight browser height
Ff
Document.documentElement.scrollHeight Browser Visual part height, document.body.scrollHeight browser all content height
Document.documentElement.scrollTop always scrolls part height for 0,document.body.scrolltop browser
Document.documentElement.clientHeight Browser All content height, document.body.clientHeight browser visual part height
Chrome
Document.documentElement.scrollHeight Browser Visual part height, document.body.scrollHeight browser all content height
Document.documentElement.scrollTop always scrolls part height for 0,document.body.scrolltop browser
Document.documentElement.clientHeight Browser All content height, document.body.clientHeight browser visual part height

Browser All content height is the height of the entire frame of the browser, including the scroll bar to Part + visual part + bottom hidden part of the height sum

The browser scrolls the height of the scroll bar to the height of the top of the entire object, depending on its height.