Scrollmaps
Scrollmaps visualise how far down a page each cohort of visitors scrolls, turning "did they see it?" into a measurable percentage you can design around.
Scrollmaps
A visualisation of how far down a page visitors scroll, expressed as the percentage of the cohort still on the page at each depth.
A scrollmap overlays your page with a heat gradient — usually red at the top, fading to blue near the footer — that encodes scroll-reach: the share of visitors who reached each pixel row. Reading one tells you, for example, that 78% of visitors saw your product description, 41% reached the reviews, and only 12% made it to the FAQ.
Scrollmaps are one of the core outputs of behavioral analytics, alongside clickmaps and session replay. They answer a single, design-defining question: of everything you put on this page, what fraction of your audience actually sees it? That number drives every above-the-fold decision you make.
The metric underneath the visualisation is scroll-reach percentage at depth D: the count of unique sessions that scrolled to at least D pixels (or D% of page height), divided by all sessions that loaded the page. It drops monotonically — every visitor sees pixel 0, fewer see pixel 1000, almost none see pixel 6000.
What makes scrollmaps useful is the curve's shape, not just the endpoint. A steep cliff at 600px means something on that screen is killing momentum — usually a tall hero image, a sticky banner, or a CTA that looks like the page has ended. A gentle slope means visitors are engaged and you have permission to put more below the fold.
scroll_reach(D) = sessions_reaching_D / total_sessions
scroll_reach(D)
Scroll-reach at depth D
Percentage of sessions that scrolled to at least depth D on the page.
sessions_reaching_D
Sessions reaching depth D
Unique sessions whose maximum scroll position was ≥ D.
total_sessions
Total sessions
All sessions that loaded the page (the denominator cohort).
A Shopify apparel store reviews the scrollmap for its bestselling jacket PDP over 30 days.
Total sessions on the PDP: 24,000
Sessions that reached the reviews block at 3,200px: 9,840
→ scroll_reach(3200px) = 9,840 / 24,000 = 41%
Only 41% of visitors are seeing the social proof block. If reviews are a known conversion lever for the category, that block is sitting too low — moving it above the size guide, or pulling a star-rating snippet up next to the price, is a high-leverage test.
Benchmarks vary heavily by page template and device. Mobile sessions almost always show deeper scroll-reach than desktop because the viewport is shorter — a desktop user sees 900px on load, a mobile user sees 650px, so reaching 2,000px is a smaller commitment on mobile. Always segment your scrollmap by device before drawing conclusions.
Typical scroll-reach by page template and depth (e-commerce, blended device)
| Page template | Reach at 50% depth | Reach at 75% depth | Reach at footer |
|---|---|---|---|
| Homepage | 55-65% | 25-35% | 8-12% |
| Collection / category | 60-70% | 35-45% | 15-20% |
| Product (PDP) | 65-75% | 40-50% | 18-25% |
| Blog / editorial | 70-80% | 45-55% | 22-30% |
| Checkout | 85-95% | 75-85% | 60-70% |
Read these as a sanity check, not a target. If your PDP is at 25% reach at 75% depth, you're likely losing visitors to a tall above-the-fold image carousel or a slow-loading reviews widget. If you're at 60%, the page is earning its length — and you have room to add a comparison block or cross-sell below.
Frequently asked questions about scrollmaps
A heatmap usually refers to clickmaps — where users tap or click. A scrollmap shows how far down they got. They answer different questions: clickmaps tell you what's interesting, scrollmaps tell you what was even seen. Most behavioral analytics tools render both as overlays on the same page screenshot.
A small JavaScript snippet listens to the browser's scroll event, records the maximum pixel position reached during the session, and reports it on page unload. Better implementations throttle the listener to avoid main-thread jank and report at fixed depth thresholds (25/50/75/100%) rather than continuously.
A well-built scrollmap script adds 5-15KB and uses passive event listeners, so the impact on Core Web Vitals is negligible. Older tools that capture continuous scroll position and ship full DOM snapshots can add 100ms+ to interaction latency — always test with Lighthouse before and after install.
Yes — always. Mobile viewports are shorter, so the same pixel depth represents a different fraction of the page. Mobile users also scroll more aggressively, so absolute reach numbers are usually higher on mobile. Comparing blended data hides both effects.
That's a 'false bottom' — visitors think the page has ended. Common causes: a full-width image with a flat horizon, a CTA button that visually closes the section, or a colour change that mimics a footer. Move whatever sits at that pixel row up by 200px and re-measure.
GA4's default enhanced measurement only fires at 90% depth, which is too coarse for design decisions. A dedicated scrollmap tool captures the full curve and overlays it on the page screenshot. You can extend GA4 with custom events at 25/50/75% but you still won't get the visual overlay.
On a blog post or editorial page, place it at the depth where reach is still 50-60% — usually around the two-thirds mark. Visitors who got that far are engaged but not committed, which is the highest-converting cohort for soft asks like email capture.
For directional reading, 1,000 sessions per template per device is enough. For decision-making on specific blocks, target 5,000+ sessions so segment slices (new vs returning, paid vs organic) still hold up. Below 500 sessions, individual scroll events distort the curve.
Yes, and they should be. Paid-social visitors typically scroll less than organic visitors because intent is lower. If your hero is optimised for high-intent visitors but 70% of your traffic is Meta ads, your scrollmap will look broken — when really you have a source-mix problem.
No — they're complementary. Scrollmaps give you the aggregate shape; session replay shows you the individual behaviour behind a specific drop-off. Use the scrollmap to find the cliff, then watch 10-20 replays around that depth to understand why people are leaving.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.