How to Take a Screenshot of a Scrolling Page

A scrolling screenshot, sometimes called a long screenshot, is a single image of content that is taller than your screen: a long article, a documentation page, a thread of comments or a feed. It sounds simple, yet it is one of the most common screenshot jobs to go wrong. Headers repeat, images come out blank, feeds never end, and the bottom half of a page sometimes looks nothing like the top.

This guide explains why scrolling pages are hard to capture, how the main techniques work, and what to do about infinite scroll, lazy-loaded images, sticky headers and panels that scroll on their own. If you only want the quickest steps for Chrome, see how to take a full page screenshot in Chrome.

Why scrolling pages are hard to capture

Screenshot tools capture what is on your screen, and a browser only draws the part of the page that fits in the window. The rest of the page exists, but at that moment it has not been painted anywhere a screenshot can see.

The tools built into desktop operating systems work this way:

• Windows: Snipping Tool, opened with Win+Shift+S, captures a rectangle, a freeform shape, a window or the full screen. It does not capture scrolling pages.
• macOS: Cmd+Shift+3 captures the whole screen, Cmd+Shift+4 lets you drag an area (press Space to capture a window instead), and Cmd+Shift+5 opens the screenshot toolbar. None of them has a built-in scrolling capture.

To get the whole page, something has to either draw the full page in one go or scroll through it and join the pieces. Modern pages make both harder: content loads only as you approach it, headers stick to the top, animations start on scroll, and some long lists remove rows once they leave the screen.

Two ways to capture a long page

Render the page in one pass

Chrome DevTools can draw the full height of a page into one image. Open DevTools with F12 (or Ctrl+Shift+I, Cmd+Option+I on macOS), open the Command Menu with Ctrl+Shift+P (Cmd+Shift+P on macOS), type screenshot and choose Capture full size screenshot. The PNG lands in your Downloads folder.

Because it does not scroll through the page the way a reader does, content that waits for scrolling can be missing. Fixed and sticky elements and lazy-loaded images can render oddly, areas with their own scrollbar are not expanded, and very long pages can come out incomplete.

Scroll and stitch

The other approach copies what a person does: scroll, capture, repeat, then join the captures. This is how InnoShot's full-page capture works:

1. Measure. It reads the page's full height and width and the size of the visible window.
2. Plan tiles. It divides the page into screen-sized steps, adding columns if the page is wider than the window.
3. Capture each tile. For each step it scrolls to the right position, waits for the page to paint, captures the visible tab and draws that tile into the growing image at its exact position.
4. Deal with fixed elements. Sticky and fixed bars are kept from repeating (more on that below).
5. Restore. It scrolls the page back to where you were and opens the result in the editor.

The scale is measured from the first tile, which takes care of high-resolution displays and browser zoom so the tiles line up at full sharpness.

Stitching sees the page as you would, including content that only appears once you scroll to it. The trade-off is time. Chrome lets an extension capture the visible tab at most twice per second, so each screen takes roughly half a second: a 20-screen page takes about 11 seconds. InnoShot shows progress throughout, and Esc cancels.

Sticky headers and footers

A naive stitch repeats a sticky header on every screen, producing a stack of identical navigation bars down the image. InnoShot shows top-anchored bars once, in the first tile, and bottom-anchored ones once, in the last tile, so the result looks like the page itself.

Cookie banners and chat bubbles are a separate problem: they are overlays rather than part of the page layout. Close them before you capture.

Lazy-loaded images

Many sites load images only when you scroll near them. That speeds up the page but leaves blank boxes in any capture that runs ahead of the loading.

InnoShot has an optional pre-scroll pass that steps through the page first, waits for images to settle and then captures. With any other tool, a simple manual version helps: scroll slowly to the bottom of the page and back to the top before you capture, so the images have loaded.

Infinite scroll and long feeds

Social feeds, search results and some news sites load more content every time you reach the bottom. A page like that has no end, so a tool that scrolls until it reaches the bottom would never stop.

InnoShot sets a maximum capture height, 40,000 CSS pixels by default. When a page keeps growing, capture stops there and the editor tells you that it happened, so you do not mistake a cut-off feed for the whole thing.

Usually you do not need the whole feed anyway. Two approaches work better:

• Capture a specific stretch. With selected area capture (Alt+Shift+S) you can drag a selection that extends beyond the visible screen; the page scrolls to capture it. That is a good fit for "these ten posts" or "this section of the results".
• Load what you need first. Scroll down until the posts you want have loaded, then capture.

Some feeds also draw differently while being scrolled. Parallax backgrounds, scroll-triggered animations and virtualized lists, which unmount rows that are off screen, can produce gaps or shifted content. InnoShot has a pause animations option and reports when the page height changed during capture. On these pages, capturing a smaller region can give a cleaner result.

Areas that scroll inside the page

Not everything that scrolls is the page. Chat windows, sidebars, code blocks and data tables often have their own scrollbar inside a page that barely moves. Full-page capture records the page, not the hidden content inside those panels.

For those, InnoShot's "Capture scrollable region" detects the scrollable areas on the page, lets you pick one, and scrolls that element instead of the page, stitching as it goes. It ships without a shortcut; you can assign one at chrome://extensions/shortcuts. The guide to capturing a scrollable div in Chrome goes through it in detail.

Your options on each platform

Chrome on Android and iOS does not support extensions, so InnoShot is desktop only. InnoShot is coming to the Chrome Web Store; the download page links to the listing once it is live.

What to do with a very long screenshot

A capture of a long page can be tens of thousands of pixels tall, which few people want to scroll through as one image. Some options:

• Crop it. The editor's crop is non-destructive, so you can trim to the section that matters and widen it again later.
• Turn it into a PDF. PDF export splits a tall image into readable A4 or Letter pages instead of shrinking it onto one; see how to convert a long screenshot into a PDF.
• Choose the format for the job. PNG keeps text crisp; JPEG and WebP produce smaller files with a quality setting.
• Mind the size limits. Browsers cap how large one image can be. InnoShot stores very long captures in segments rather than cutting them off, and when an export would exceed the limit it offers numbered files, a scaled-down image or a PDF. The docs on oversized images explain each choice.

When scrolling capture does not work

• Chrome blocks extensions on chrome:// pages, the Chrome Web Store, other extensions' pages, view-source: pages and the New Tab page.
• Local file:// pages need "Allow access to file URLs" turned on for the extension.
• Content inside cross-origin iframes, such as embedded maps or widgets, appears in the image, but InnoShot cannot scroll a scrollable area inside them.
• Pages that change while you scroll may still come out uneven; pausing animations or capturing a smaller region usually helps.

The full-page troubleshooting guide covers more cases.

Wrapping up

Scrolling screenshots go wrong for predictable reasons: the browser only paints what is on screen, pages load content late, headers stick, and feeds never end. Once you know which of those you are dealing with, the fix is usually clear: pre-load the images, cap or narrow the capture, use the scrollable region mode for panels, and turn very tall results into a PDF or a cropped image that people will actually read.