How to determine if vertical scroll bar has reached the bottom of the web page?

Question

The same question is answered in jQUery but I\'m looking for solution without jQuery. How do you know the scroll bar has reached bottom of a page

I would like to kno

Answer 1

The correct way to check if you reached the bottom of the page is this:

1. Get document.body.clientHeight = the height of the ACTUAL screen shown
2. Get document.body.offsetHeight or document.body.scrollHeight = the height of the entire page shown
3. Check if document.body.scrollTop = document.body.scrollHeight - document.body.clientHeight

If 3 is true, you reached the bottom of the page

Answer 2

When you tell an element to scroll, if its scrollTop (or whatever appropriate property) doesn't change, then can't you assume that it has scrolled as far as is capable?

So you can keep track of the old scrollTop, tell it to scroll some, and then check to see if it really did it:

function scroller() {
    var old = someElem.scrollTop;
    someElem.scrollTop += 200;
    if (someElem.scrollTop > old) {
        // we still have some scrolling to do...
    } else {
        // we have reached rock bottom
    }
}

Answer 3

<span id="add"></add>

<script>
    window.onscroll = scroll;

    function scroll () {
    if (window.pageYOffset + window.innerHeight >= document.body.scrollHeight - 100) {
            document.getElementById("add").innerHTML += 'test<br />test<br />test<br />test<br />test<br />';
        }
    }
</script>

Answer 4

function scrollHandler(theElement){
   if((theElement.scrollHeight - theElement.scrollTop) + "px" == theElement.style.height)
       alert("Bottom");
}

For the HTML element (like div) add the event -- onscroll='scrollHandler(this)'.

Answer 5

I just read through the jQuery source code, and it looks like you'll need the "pageYOffset". Then you can get the window height and document height.

Something like this:

var yLeftToGo = document.height - (window.pageYOffset + window.innerHeight);

If yLeftToGo is 0, then you're at the bottom. At least that's the general idea.

Answer 6

Here is some code I've used to power infinite scrolling list views:

var isBelowBuffer = false;  // Flag to prevent actions from firing multiple times

$(window).scroll(function() {
    // Anytime user scrolls to the bottom
    if (isScrolledToBottom(30) === true) {
        if (isBelowBuffer === false) {
            // ... do something
        }
        isBelowBuffer = true;
    } else {
        isBelowBuffer = false;
    }
});

function isScrolledToBottom(buffer) {
    var pageHeight = document.body.scrollHeight;
    // NOTE:  IE and the other browsers handle scrollTop and pageYOffset differently
    var pagePosition = document.body.offsetHeight + Math.max(parseInt(document.body.scrollTop), parseInt(window.pageYOffset - 1));
    buffer = buffer || 0;
    console.log(pagePosition + "px / " + (pageHeight) + "px");
    return pagePosition >= (pageHeight - buffer);
}