JS to determine whether the scroll bar has been to the bottom of the page or the top instance _javascript tips

This article illustrates the method of JS to determine whether the scroll bar has been to the bottom or top of the page. Share to everyone for your reference. The specific analysis is as follows:

We often see a lot of Web site a return to the top effect is when we scroll to the specified position when the top came out, otherwise it will automatically hide, the following to introduce the effect of the implementation of the principle and method.

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

Copy Code code as follows:

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

To use Document.documentelement, you must add a declaration to the page header:

Copy Code code as follows:

<! 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:

Copy Code code as follows:

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:

Copy Code code as follows:

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

Copy Code code 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

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.

Copy Code code as follows:

/********************
* 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 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 always 0
Document.documentElement.clientHeight Browser Visual part 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 part height for 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.
Understand the above parameters we can make a compatible Ie,ff,chrome browser scrolling effect.

I hope this article will help you with your JavaScript programming.