Javascript

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

Sponsor

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.

You scrolled the whole way down 😱
Last Updated Tuesday, 6 April 2021
Johnny Simpson
Johnny Simpson

Subscribe for Daily Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email