Capturing a page where the content scrolls inside a panel

Open a webmail client and press End. Nothing happens. The message list has its own scrollbar, and the document behind it is exactly as tall as your window.

Every capture tool starts by asking how tall the document is. On this kind of layout the honest answer is one viewport, so a tool that trusts it finishes in a single frame and reports success.

How to tell this is your problem

1. 1

   Click on an empty part of the page background and press End

   If the content does not move, the document is not the thing that scrolls.

2. 2

   Look for a second scrollbar

   An inner scrollbar that appears on hover, inset from the window edge, is the giveaway. Detecting it is part of how automatic scrolling works.

3. 3

   Check what your capture returned

   Exactly one viewport of height is the signature. A truncated-but-long image is a different problem — see screenshots cut off at the bottom.

What a capture has to do

Detect the real scroller

When the document does not overflow, search the tree for the largest element whose scroll height genuinely exceeds its client height by a meaningful margin, and whose computed overflow allows scrolling.

Scroll that element, not the window

Setting scrollTop on the element moves the content. The window stays where it is throughout.

Crop every capture to the element's bounds

Without this the surrounding application chrome — the sidebar, the toolbar — is pasted into every band. Cropping to the scroller's rectangle means the output is the content and nothing else.

Handle more than one candidate

Dashboards often have several scrolling panes. Clicking inside the one you want before capturing makes the choice unambiguous, as covered in the guide to capturing a whole page.