Scroll Depth Calculator

Step-by-Step Guide

1. 1Choose a Calculation Mode: Select Manual Calculation to enter your own numbers, or Live Browser Simulation to track this page's real scroll position.
2. 2Try an Example (Optional): Click Blog Post, Landing Page Bottom, or Long-Form Article to instantly load realistic sample figures.
3. 3Enter Your Page Dimensions: Type the document height and viewport height, then drag the scroll position slider. Results update instantly with a 150ms debounce.
4. 4Set Optional Adjustments: Expand Optional Inputs to account for a sticky header, footer height, or a manual offset adjustment.
5. 5Review Scroll Depth and Engagement: Check the gauge, progress bar, pixels viewed and remaining, and engagement rating (Bounced through Completed).
6. 6Compare, Export, or Share: Use Compare as A/B to evaluate two pages side by side, export as CSV or JSON, print a formatted report, or copy a shareable URL.

Key Features

• ✓Manual Calculation and Live Browser Simulation modes
• ✓Live mode tracks this page's real scroll position in real time
• ✓Interactive circular gauge with color-coded engagement rating
• ✓Sticky header, footer height, and offset adjustment support
• ✓5-tier engagement scoring (Bounced to Completed) with recommendations
• ✓Pixels viewed, pixels remaining, and reading completion estimate
• ✓Copy-ready embeddable JavaScript scroll tracker snippet
• ✓Compare-as-A/B page comparison mode
• ✓Shareable calculation URL using query parameters
• ✓Export report as CSV or JSON with full breakdown
• ✓Print-ready formatted report
• ✓Copy full report to clipboard in one click
• ✓Calculation history — save and reload up to 20 past results
• ✓No signup required — 100% free to use
• ✓All processing runs locally — no data leaves your browser

Pro Tips

• 💡Place your most important call-to-action within the scroll depth your typical visitors actually reach — measure real behavior with analytics rather than assuming everyone scrolls to the bottom.
• 💡Account for sticky headers and footers when interpreting scroll depth — a large sticky header can meaningfully shrink the effective viewport a visitor sees at any given scroll position.
• 💡Use scroll depth alongside time-on-page — a visitor who scrolls to 90% instantly by pressing End didn't necessarily read the content, while a slower scroll pattern suggests genuine reading.
• 💡Test different content lengths and structures on similar pages to see how scroll depth patterns shift with formatting changes like subheadings, images, and shorter paragraphs.
• 💡Use the embeddable JavaScript snippet as a starting point for real analytics integration — swap the console.log call for your analytics platform's event tracking call.

Common Mistakes to Avoid

• ✕Don't measure scroll depth using only the raw scroll position without adding viewport height — a visitor has 'seen' everything down to the bottom of their screen, not just the exact scroll offset.
• ✕Don't ignore mobile viewport differences — a page that shows 100% scroll depth on a tall desktop viewport might show a much lower depth on a short mobile viewport for the same scroll position.
• ✕Don't place critical content or forms below the depth most visitors realistically reach without first checking real scroll behavior data.
• ✕Don't forget that document height can change dynamically on pages with lazy-loaded content or infinite scroll — a static one-time measurement may not reflect the true final page height.
• ✕Don't treat a single scroll depth snapshot as a trend — track it across many sessions to understand typical visitor behavior on a page.