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 1617726362517
More Tips and Tricks for Javascript
- Javascript loops: for vs forEach vs for.. in vs for.. of
- Javascript Dates and How they Work
- How to validate an email with Javascript
- Future Javascript: Javascript Pipeline Operators
- Waiting for the DOM to be ready in Javascript
- Javascript Immediately invoked function expressions (IIFE)
- A Complete Guide to Javascript Maps
- Javascript Arrays - How to Remove Duplicate Elements
- Javascript Variables
- What are NodeLists, and how do they work?