Tracking how far users scroll down a webpage can provide valuable insights into content engagement. By monitoring scroll depth milestones—such as 25%, 50%, 75%, and 100% — you can trigger specific actions or events when users reach these points.
Scroll Depth Tracking with Vanilla JavaScript
The following script listens for scroll events and calculates the user’s scroll depth as a percentage of the total page height. When the user reaches each milestone for the first time, a corresponding action is triggered.
// Flags to ensure each milestone is only triggered once
let hasReached25 = false;
let hasReached50 = false;
let hasReached75 = false;
let hasReached100 = false;
function handleScroll() {
const scrollTop = window.scrollY;
const viewportHeight = window.innerHeight;
const totalHeight = document.documentElement.scrollHeight;
const scrollPercent = ((scrollTop + viewportHeight) / totalHeight) * 100;
if (scrollPercent >= 25 && !hasReached25) {
hasReached25 = true;
// Action for 25% scroll depth
console.log('User reached 25% scroll depth');
}
if (scrollPercent >= 50 && !hasReached50) {
hasReached50 = true;
// Action for 50% scroll depth
console.log('User reached 50% scroll depth');
}
if (scrollPercent >= 75 && !hasReached75) {
hasReached75 = true;
// Action for 75% scroll depth
console.log('User reached 75% scroll depth');
}
if (scrollPercent >= 100 && !hasReached100) {
hasReached100 = true;
// Action for 100% scroll depth
console.log('User reached 100% scroll depth');
}
}
// Attach the scroll event listener
window.addEventListener('scroll', handleScroll);Flags (hasReached25, etc.): These boolean variables ensure that each scroll depth milestone triggers its action only once per page load.
handleScroll Function: Calculates the current scroll position as a percentage of the total page height and checks against each milestone.
Event Listener: The handleScroll function is attached to the window’s scroll event, so it’s called every time the user scrolls.
This implementation uses window.scrollY and window.innerHeight to determine the current scroll position and viewport size, respectively. document.documentElement.scrollHeight provides the total height of the document, ensuring compatibility across different browsers.
