How to Track Scroll Depth (and Read It Honestly)
Scroll depth tells you where readers stop. How to track 25/50/75/100% milestones as events and the interpretation traps to avoid.
Pageviews count arrivals; scroll depth counts journeys through the page. The gap between the two is where content strategy lives: the landing page where 70% never see the pricing table, the 3,000-word post abandoned at the second heading, the comparison table that — once reached — converts everyone who sees it. Here is the clean implementation and, more importantly, the honest way to read it.
Milestone implementation
const marks = [25, 50, 75, 100];
const fired = new Set();
window.addEventListener('scroll', () => {
const el = document.documentElement;
const pct = Math.round(
(el.scrollTop + window.innerHeight) / el.scrollHeight * 100
);
for (const m of marks) {
if (pct >= m && !fired.has(m)) {
fired.add(m);
window.webanalytics?.track('scroll_depth', {
depth: m, page: location.pathname,
});
}
}
}, { passive: true });Four events per visitor per page, maximum — milestone dedup keeps the volume sane and the event quota happy. The passive flag keeps scrolling smooth; never put work on the scroll path.
Reading it without fooling yourself
- 100% ≠ read. A skimmer hits bottom in nine seconds. Cross-check suspicious completion rates against time-on-page before celebrating.
- 0–25% is partly bounce physics. Short viewports fire 25% on arrival for short pages. Compare pages of similar length, or normalize by page height.
- The actionable read is the cliff. A smooth decay (100→70→45→30) is normal reading behavior. A cliff (95→90→25→20) marks the exact section where you lost the room — fix that section, not the page.
- Position your conversions above the cliff. If 40% reach 75% depth and your CTA sits at 90%, the redesign brief writes itself — the same logic as pricing-page analysis.
Where it earns its keep
Long-form content, landing pages, and docs — anywhere the page has a narrative arc and a payoff placement question. Paired with engagement metrics replacing bounce rate, scroll milestones turn 'this post got 5,000 views' into 'this post held 60% of readers to the recommendation section' — a sentence you can actually act on.