Checking when a user has scrolled to the end of a page can be useful for a number of different features. You may want to load more information once a user has scrolled to the end to create infinite scrolling, or find out that a user has read your whole article.

Listening for the scroll event

We can listen for the user scrolling the page by attaching a scroll listener to the document object.

document.addEventListener("scroll", function (event) {
    // perform logic when a user scrolls
});

This event will trigger each time the user scrolls the page, and the frequency that it reports information is quite high. It is common to debounce this triggered function which will be explained further on.

Detecting the bottom of the page

There are some properties on the window and document objects that help us know whether the user has scrolled to the end of the page. First useful property is the height of the page in total which you can get from the document.

console.log(document.body.scrollHeight); // height in px

Then we can work out how far down the page a user has scrolled so far using some properties on the window object.

console.log(window.innerHeight); // how tall is the current window?
console.log(window.pageYOffset); // how far from the top of the page, is our current view?

Combining these properties we can create a test for checking if we have reached the end.

// have we scrolled to the end of the page?
function testHeight() {
    return window.pageYOffset + window.innerHeight >= document.body.scrollHeight;
}

Example including debounce

In the following codepen I have produced an example and the scroller object is a module that could be included in any webpage. When the bottom of the page has been reached, an event is triggered.