Clycyo
How-to4 min read

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.