What a Scroll Map Shows About Where Readers Stop

What is a scroll map?

In web analytics, a scroll map is a heatmap that colors each horizontal band of a page by the percentage of visitors whose screen reached that band, hottest at the top where everyone starts and cooling as people leave. The tracking script records the deepest point each page view scrolled to, and the heatmap tool turns those depths into a cumulative curve painted over a screenshot. Use it to answer one question: did enough people see the section that matters before they left?

Microsoft Clarity's documentation puts the purpose plainly: scroll maps "help you determine the ideal page length for maximum conversions and show how far your users scroll on the pages." A scroll map does not show what people read, clicked or understood. It shows reach, and reach is the first gate every other page metric depends on. The overview of every website heatmap type places the scroll map next to the click, move, confetti and attention maps.

How does a scroll map calculate the percentage at each band?

A scroll map calculates each band's percentage by dividing the number of page views that reached that depth by the total page views in the sample. Every visitor counts as having reached the top, so the curve starts at 100% and can only fall as you move down the page.

Clarity exposes the numbers in a side panel with three columns. "% Scrolled" shows "the page percent data in increments of 5%," "# of visitors" shows how many users landed on the page, and "% drop off" shows "the percent of visitors who dropped off at a corresponding percent of page height." Hovering over the map shows "the exact % of users who reached that point," and Clarity draws preset lines at 25%, 50% and 75%.

Scroll map element	What it shows	How to use it
Color bands	Share of visitors who reached each depth, warm to cool	A quick read of where the audience thins
% scrolled column	Page height in 5% steps	Locate a section by its position on the page
% drop off column	Share of visitors lost at each step	Find the single band that loses the most people
25%, 50%, 75% lines	Depth reached by that share of visitors	Check whether a key section sits above or below each line
Average fold	What visitors saw before scrolling	Decide what belongs in the first screen

The drop-off column is the one to read first. A smooth fall from top to bottom is normal. A sudden step, where 20% of visitors leave in one 5% band, points at a specific section that stops people.

What is the average fold on a scroll map?

The average fold on a scroll map is a line marking how much of the page the average visitor saw on screen before scrolling at all. Clarity defines it as "the content seen above the fold based on the users accessing your site," and says it "indicates the average location visible on a webpage before the user starts scrolling."

The fold is an average across screen sizes, which is why it only makes sense on a map filtered to one device type. A desktop map and a phone map put the fold in very different places. Read the line as the edge of what everyone saw for free. Anything below it had to earn a scroll.

How is a scroll map different from scroll depth tracking?

A scroll map is a visual of the full reach curve drawn over the page, while scroll depth tracking sends milestone events to your analytics tool when a visitor passes set thresholds such as 25%, 50%, 75% and 90%. Both measure how far people go. They answer different follow-up questions.

	Scroll map	Scroll depth events
Output	Colored overlay on a screenshot	Events in your analytics reports
Resolution	Continuous, every band	Only the thresholds you define
Segmenting	Filters inside the heatmap tool	Any dimension your analytics tool holds, such as source or campaign
Best for	Spotting where on the page people leave	Comparing reach across pages, sources and time

The scroll depth guide covers the event side, including why element visibility beats percentage thresholds for a call to action. Use the scroll map to find the problem band, then use events to watch whether a fix moves the number over time.

How do you read a scroll map step by step?

Read a scroll map by filtering to one device, finding the biggest drop-off, and then checking where your key sections sit against the 50% and 75% lines. This takes a few minutes per page.

1. Filter to one device type. Mixing desktop and mobile averages two different page heights into one meaningless curve.
2. Note the average fold. List what sits above it. If the headline, the offer and the main call to action are not all there, start with that.
3. Find the steepest drop in the % drop off column. Scroll to that band on the screenshot and name the section that sits there.
4. Mark your key sections. Find social proof, pricing and the form or call to action, and write down the percentage of visitors who reached each one.
5. Compare against your goal. If pricing sits where only 30% of visitors arrive, most of the audience never saw the price.
6. Watch a few recordings that end at the drop-off band. The map tells you where people leave. A session replay shows what was on screen when they did.
7. Move one section and re-measure. Change one thing, then compare the new map against the old one over the same number of days.

The same steps apply to analyzing any landing page: reach comes first, because a section nobody reaches cannot convert anyone.

Four things that stretch or shrink a page

Lazy-loaded images and embeds Add height after the first paint, so a section sits at different percentages on fast and slow connections

Infinite scroll and load more The page grows as the visitor scrolls, so 80% keeps moving

Closed accordions and tabs The page is shorter than the screenshot taken with content expanded

Cookie banners and sticky promo bars Push content down for some visitors and not others

Why does a scroll map mislead on some pages?

A scroll map misleads when the page height changes between visits, because every percentage on the map is a percentage of a height the tool assumes is fixed. Clarity's own scale is in "percent of page height," and anything that stretches or shrinks the page shifts what 50% means.

Four page patterns cause it. Lazy-loaded images and embeds add height after the first paint, so the same section sits at different percentages for fast and slow connections. Infinite scroll and "load more" feeds grow the page as the visitor scrolls, so reaching 80% of a page that keeps getting longer is not the same as reaching 80% of a fixed article. Accordions and tabs that start closed make the page shorter than the screenshot when expanded content is counted. Cookie banners and sticky promo bars push content down for some visitors and not others.

Short pages cause the opposite problem. If the whole page fits on one screen, every visitor reaches 100% without scrolling, and the map shows solid heat that means nothing. Check the average fold against the page length before reading anything into a short page's colors.

How does Flowsery measure how far visitors scroll?

Flowsery measures scroll reach as part of its landing page analytics, which capture "sources, UTMs, referrers, scroll depth, CTA clicks, goals, and funnel steps without cookies or personal IDs." Flowsery describes the purpose as measuring "whether visitors reach proof, pricing, forms, and primary calls to action before they leave," which is the same question a scroll map answers, reported as numbers you can compare by page and source rather than as a color overlay. Flowsery does not list scroll maps or heatmaps among its features. Its session replay records every click and scroll as full DOM playback, so you can watch the visits that stopped at a given section.

Frequently asked questions

What does the red area on a scroll map mean?

Red marks the bands that the largest share of visitors reached, which is always the top of the page. The color cools as visitors leave. Read the percentage on hover or in the side panel instead of judging by color alone.

What is a good scroll map result?

A good result is one where your main call to action sits above the depth reached by most visitors on that device. There is no universal percentage, because a short pricing page and a long article have different jobs. Compare a page against its own earlier maps after each change.

Why does my scroll map show 100% at the bottom?

The page fits on one screen for most visitors, so they reached the bottom without scrolling. A scroll map on a short page has nothing to measure. Check where the average fold sits before reading the colors.

Should I build separate scroll maps for mobile and desktop?

Yes. Page height, the fold and the position of every section all change with screen size, so a combined map averages two different pages. Clarity lets you switch between PC, tablet and mobile views for this reason.

What is the difference between a scroll map and an attention map?

A scroll map shows how far down the page visitors reached. An attention map shows how long each part of the page stayed on screen. A section can have high reach and low attention when people scroll straight past it.

Does a scroll map show whether people read the content?

No. A scroll map records that a band was on screen, not that anyone read it. Fast scrolling past a section counts the same as stopping to read it, so pair the map with attention data or recordings before claiming a section was read.

How do I find where visitors leave on a scroll map?

Read the % drop off column and look for the steepest step. A smooth fall is normal, but a band where 20% of visitors leave at once points at a section that stops people. Scroll to that band on the screenshot and name the section that sits there.

Why does my scroll map look wrong on a page with infinite scroll?

Every percentage on a scroll map is a share of a page height the tool assumes is fixed. An infinite scroll or load more feed grows as the visitor scrolls, so reaching 80% of it is not the same as reaching 80% of a fixed article.

Does Flowsery have scroll maps?

Flowsery does not list scroll maps or heatmaps among its features. It measures scroll depth as part of its landing page analytics, reported as numbers you can compare by page and source. Its session replay lets you watch the visits that stopped at a given section.

How do I tell if moving a section improved my scroll map?

Change one thing, then compare the new map against the old one over the same number of days. Scroll depth events help you watch whether the number holds over time. Recordings that end at the drop-off band show what was on screen when people left.