What is a scroll map?

How do you read a scroll map?

Read it as a survival curve, not as a picture. At every vertical position the tool reports the percentage of sessions that reached at least that far. The number only ever decreases as you move down.

Three readings matter more than the colors.

The 50% line. The depth at which half your audience has left. Anything below it is being seen by a minority, whatever it cost to produce.

The gradient of decay. A gradual, even fade means people are reading and progressively losing interest, which is normal. A cliff, where the number drops sharply across a short distance, means something at that position stopped them. Cliffs are the actionable finding.

The floor. The percentage reaching the actual page bottom. What counts as low depends entirely on the page, since a small floor on a long article is expected and the same floor on a short landing page means the page is longer than it looks.

Key takeaway: gradual decay is a content problem, a cliff is a design problem, and only the cliff has a fixable location.

Where is the fold on a scroll map?

There is no single fold. There is a distribution of viewport heights across your traffic, and most tools draw one "average fold" line representing the median of that distribution. Treat it as a band rather than a line, and check the viewport report in your analytics before designing to it, because a median hides how wide the spread is.

Use the line to orient the map rather than to judge it. Everything above it was on screen at load for at least half your visitors. Everything below it required a deliberate scroll, and the map already reports what percentage made each one, so read that number instead of arguing about where the fold ought to be. Above the fold carries the eyetracking research on why the position still weighs so heavily.

What is a false bottom?

A false bottom is a point in the layout that looks like the end of the page when it is not. Visitors stop, because they believe there is nothing further. The scroll map shows this as a cliff with no obvious content cause.

Common producers:

• A full-viewport-height section whose content fits neatly, leaving no partially visible element to signal continuation
• A large area of flat background color spanning the full width
• A horizontal rule or heavy border running edge to edge
• A section that visually resembles a footer, such as a dark band with links
• A large image occupying the full viewport with no cropped element beneath

The fix is always the same: make sure something is partially visible at the bottom edge of the viewport at common heights. A cropped headline, a half-visible card, an element bleeding past the boundary. Continuation needs a visual cue.

What does a scroll map fail to tell you?

Reaching is not reading. A scroll map records that pixels entered the viewport. Fast scrolling past a section counts identically to reading it. Pair with an attention map or a recording to separate the two.

It cannot explain a cliff. It shows the position, never the reason. The reason lives in recordings of sessions that stopped there.

It blends devices by default. Mobile pages are far longer in scroll distance than the same content on desktop, and the fold sits in a different place. A blended scroll map describes neither.

It hides segment differences. Visitors arriving with high intent scroll further than casual traffic. The composite averages both into a curve that matches neither.

Which Webflow layouts distort scroll maps?

100vh hero sections. Common in Webflow templates, and the leading producer of false bottoms. A hero sized exactly to the viewport gives no continuation cue at any screen height.

Scroll-triggered interactions. Content that fades or slides in on scroll may not be present in the screenshot the scroll map renders over, so the overlay maps depth against a page that looks different from the one visitors moved through.

Sticky navigation. A sticky header consumes viewport height at every scroll position, so the real fold sits higher than the tool's average fold line suggests and the top band reads as more visible than it was.

Separately, anything that changes page height after render corrupts the numbers rather than the picture: lazy-loaded images resolving late, and CMS collection lists rendering 6 items on one page and 40 on another under one template. Scroll depth covers that failure and what to instrument instead.

Related terms

Scroll depth · Website heatmap · Click map · Above the fold · Attention map

Service: Conversion Rate Optimization.

FAQ

How many sessions does a scroll map need?

Around 100 sessions produces a stable curve, which is the lowest requirement of any heatmap type because scroll depth is a single monotonic value per session rather than a set of discrete events. Push to 300 or more before restructuring a page.

What is a good scroll depth percentage?

The question has no benchmark answer, because it depends entirely on page length and type. Compare a page against itself over time, and against other pages of similar length on your own site. Cross-site benchmarks for scroll depth are noise.

Should important content always go above the fold?

The primary answer and the primary action, yes. Everything else, no. Forcing a full argument above the fold produces cramped pages that convert worse. Put the answer up top, earn the scroll, and use continuation cues so people know there is more.

Why does my scroll map show more than 100% at the top?

Usually visitors scrolling up and back down, counted more than once by a tool measuring scroll events rather than maximum depth per session. Check whether your tool reports maximum depth or cumulative scroll activity.