How to Capture a Scrollable Div in Chrome

Many modern pages do not scroll as a whole. Web mail, chat apps, admin dashboards, code viewers and long dialogs often keep the page fixed and put the content in a box with its own scrollbar. In CSS terms, that box has a limited height or max-height and overflow: auto or overflow: scroll.

When you take a screenshot of a page like that, you get only the part of the box that is currently visible. Even a full-page capture can come out the same as a normal screenshot, because the page itself is not what scrolls. This guide shows how to capture the whole contents of such a box, first with Chrome DevTools and then with InnoShot.

Why normal screenshots miss the content

Full-page tools work with the height of the document. The hidden part of a scrolling box is not part of that height: as far as the page is concerned, the box is only as tall as its visible area, and its overflow is clipped inside it. So:

• A visible-area screenshot shows the box at its current scroll position.
• A full-page screenshot shows the whole page, but the box still shows only one slice of its contents.
• On an app-style layout where the page body never scrolls, a full-page screenshot may be no taller than the window.

To check whether you are dealing with a scrolling box, scroll with the mouse over the area. If only that panel moves and the rest of the page stays put, the content lives in its own scroll container.

The manual way: Chrome DevTools

DevTools has no single button for this, but you can get there with a temporary style change.

Step 1: Find the scrolling element

1. Right-click inside the scrolling area and choose Inspect, or open DevTools with F12 (Ctrl+Shift+I on Windows and Linux, Cmd+Option+I on macOS).
2. The Elements panel selects the node you clicked, which is often a child of the scroll container. Move up the tree one node at a time.
3. Look in the Styles pane for a rule with overflow, overflow-y set to auto or scroll, together with a height or max-height. That is the element you want. Hovering a node in the tree highlights it on the page, which helps confirm that its outline matches the visible box.

Step 2: Understand what "Capture node screenshot" does

With the element selected, you can right-click it in the Elements panel and choose Capture node screenshot, or open the Command Menu with Ctrl+Shift+P (Cmd+Shift+P on macOS), type "screenshot" and pick the same command.

On its own, this does not solve the problem. It captures the element's box as rendered, and for a scroll container that box shows only the visible slice of its contents. You get a tidy image of exactly what you could already see.

Step 3: Temporarily remove the height limit

The usual workaround is to let the box grow to the full height of its content:

1. With the scroll container selected, find the element.style section at the top of the Styles pane.

2. Click inside it and add these declarations:

   max-height: none;
   height: auto;
   overflow: visible;
   

3. Look at the page. The box should now be as tall as its contents, pushing anything below it further down.

If you prefer the Console, $0 refers to the element selected in the Elements panel, so this does the same thing:

Object.assign($0.style, { maxHeight: 'none', height: 'auto', overflow: 'visible' });

Whether this is enough depends on the page. A parent element can impose its own limit, for example a wrapper with a fixed height or overflow: hidden. In flex and grid layouts the box may also be sized by its parent. If the content is still cut off, repeat the change on each ancestor until it is fully visible.

Step 4: Capture

With the box expanded, select it and run Capture node screenshot again, or use Capture full size screenshot from the Command Menu if the page now scrolls to show everything. DevTools saves the PNG to your Downloads folder. In current versions of Chrome, a node screenshot usually includes parts of the element that extend below the window, but results vary from page to page, so check the image.

Step 5: Reload

The style changes exist only in your browser tab. Reload the page to put everything back.

Where the manual method breaks down

• Virtualized lists. Long chat histories, feeds and big tables often render only the rows near the visible area. Expanding the box shows empty space or a partial list, because the other rows do not exist yet.
• Content that loads on scroll. Some panels load more items only when you scroll. Expanding the box does not trigger that loading.
• Scripts and layout shifts. The page's code can reset your styles, and an expanded box can change widths or wrap text differently from the scrolled view.
• Very tall nodes can come out incomplete.

The InnoShot way: scrollable region capture

InnoShot captures a scrolling box the way you would read it: by scrolling the box itself and stitching the screenshots together. You do not change any styles, so the layout stays as it is. InnoShot is coming to the Chrome Web Store; the download page links to the listing once it is live.

1. Open the page with the scrolling panel.
2. Click the InnoShot icon in the toolbar and choose scrollable region capture. This command ships without a keyboard shortcut; you can assign one at chrome://extensions/shortcuts, as the keyboard shortcuts guide explains.
3. InnoShot detects the scrollable elements on the page. Pick the one you want.
4. InnoShot scrolls that element step by step, captures each view and stitches them into one image. Chrome allows an extension at most two visible-tab captures per second, so a long panel takes a few seconds. Progress is shown, and Esc cancels.
5. When it finishes, InnoShot restores the scroll position and opens the result in the editor, where you can crop, redact, annotate, add a background or export it as PNG, JPEG, WebP or PDF.

The scrollable containers documentation covers the details.

Which capture mode to use

Element capture is often confused with this task. It captures an element's outer box, stitching it if the element is taller than the screen, but it does not scroll the content inside the element. The guide to capturing a specific element explains when that is the better choice.

Limits and common problems

• Embedded frames from another site. Content in a cross-origin iframe, such as an embedded widget, appears in captures as pixels, but neither the element picker nor scrollable region capture can reach inside it. If the embedded content has its own address, opening it in a separate tab may let you capture it as a normal page.
• Virtualized or lazy lists. Lists that unmount rows outside the visible area, or that load more as you scroll, can render differently while being scrolled. Check the stitched result, and if older items are missing, scroll through the panel once to load them before capturing.
• Nested scroll areas. A panel may contain another scrolling box, such as a code block inside a chat message. Pick the container that holds the content you need.
• Sticky rows inside the panel. A sticky table header or date divider inside a scrolling box can behave differently from a page-level sticky header. Check the result and crop if needed.
• Restricted pages. Chrome does not let extensions run on pages such as chrome:// pages or the Chrome Web Store.

Wrapping up

A scrollable div hides most of its content from ordinary screenshots. In DevTools you can expand it with a few temporary CSS overrides and capture the node, which works well on simple layouts but needs care on app-style pages. Scrollable region capture in InnoShot scrolls the box for you, stitches the result and then puts the box back as it was. If the result is very long, exporting it as a multi-page PDF keeps it readable.