Javascript

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

On many content focused websites, scrolling to the bottom usually triggers an event that loads 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:

javascript Copy
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.

You scrolled the whole way down 😱
Last Updated Tuesday, 6 April 2021
Click to Subscribe Subscribed

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email