SCROLL AREA CAPTURE

How to Capture a Scrollable Area in Chrome

Capture one chat, table, modal, sidebar, or dashboard panel that scrolls independently inside a webpage.

The short answer

Choose Scroll Area Capture in PageCapture, inspect the blue highlight on the page, and select the panel that has its own scrolling content. Once the boundary is correct, capture the area and save it as PNG or PDF, or copy it to the Clipboard when a supported single-image result is available.

Scroll area capture versus full page capture

Scroll area capture

Use it when one container inside the page has its own scrollbar and only that container matters.

Full page capture

Use it when the browser document itself continues downward and you need its complete reading order.

A section with no internal scrolling has no hidden area for this mode to continue through. Use full page capture or visible area capture for that kind of content.

Common uses for scroll area capture

Chats and email lists

Keep the conversation or message list while leaving unrelated navigation and surrounding panels out.

Dashboards and tables

Capture a long data table, activity log, or record list that scrolls within a fixed card.

Modals and sidebars

Preserve content inside an overlay or side panel when the panel is taller than its visible frame.

Select the scroll container

  1. Scroll inside the target panel first to confirm that the panel itself moves independently.
  2. Choose Scroll Area Capture in PageCapture.
  3. Move over the page and compare the blue highlight with the panel you want.
  4. Select the container that includes both the required content and its scrolling boundary.
  5. Capture the area, then check the beginning, end, and horizontal edges in the result.

How to recognize the wrong element

The selected parent is too large

If the highlight covers most of the webpage or includes unrelated navigation, you selected an ancestor outside the true scrolling panel. Inspect closer to the panel’s content and scrollbar.

The selected child is too small

If only one row, card, or message is highlighted and that item does not scroll by itself, you selected a child inside the container. Choose the surrounding panel that holds multiple items and has its own scrolling behavior.

The deciding factor is whether the selected element itself scrolls. A visually tall section is not necessarily the scroll container.

Structures that may limit capture

Content inside an inaccessible cross-origin iframe and protected browser surfaces may not be available for selection or capture because of Chrome security boundaries. PageCapture does not bypass those restrictions.

Canvas-based interfaces and live dashboards may render differently from regular document elements or continue changing between frames. If the result is unstable, pause the page when possible or use visible area capture for the exact state currently on screen.

Related PageCapture guides