Javascript

How to check if a user has scrolled to the bottom of a page with vanilla Javascript

On many websites, scrolling to the bottom usually indicates 'load more content'. On facebook or instagram, for instance, scrolling to the bottom of a page leads to more content being loaded automatically.

But how do you find out if a user has scrolled to the bottom of a page? It's pretty easy with Javascript.

How to check if a user has scrolled to the bottom

To check if the user is at the bottom of the page, use the following code:

document.addEventListener('DOMContentLoaded', function(e) {
    document.addEventListener('scroll', function(e) {
        let documentHeight = document.body.scrollHeight;
        let currentScroll = window.scrollY + window.innerHeight;
        // When the user is [modifier]px from the bottom, fire the event.
        let modifier = 200; 
        if(currentScroll + modifier > documentHeight) {
            console.log('You are at the bottom!')
        }
    })
})

Don't believe me? Try scrolling to the bottom of this page to see it in action.

More Tips and Tricks for Javascript

• Resolving HTTP Cannot set headers after they are sent to the client in Node.JS
• Javascript Immediately invoked function expressions (IIFE)
• Javascript Types
• Creating a NodeJS Push Notification System with Service Workers
• How does the Javascript logical AND (&&) operator work?
• Art Generator with Javascript and WebGL
• Javascript Proxy: Using Javascript Proxies like a Pro
• Javascript Math Tutorial: How to do Math in Javascript
• Import, Export and Require in Javascript
• How to check if a user has scrolled to the bottom of a page with vanilla Javascript