How to Capture Scrolling Screenshots in Chrome (2026)

A scrolling screenshot captures an entire webpage from top to bottom — including everything below the visible viewport. Unlike a regular screenshot that only captures what you can see, a scrolling screenshot automatically scrolls through the page and stitches all sections into one seamless image.

This is essential for capturing long articles, dashboards, landing pages, product listings, email templates, and any content that extends beyond the screen.

How Scrolling Screenshots Work

There are two fundamentally different approaches to capturing a full page:

Approach 1: Scroll and Stitch (Extension-based)

The extension scrolls through the page step by step, capturing the visible viewport at each position. After reaching the bottom, it stitches all captured sections into a single continuous image.

Advantages:

• Images load as the page scrolls (lazy loading works correctly)
• The extension sees the page exactly as a user would
• Sticky headers can be detected and hidden to prevent duplication
• Works on dynamic content and single-page applications

Approach 2: Single-pass Render (DevTools)

Chrome DevTools resizes the internal viewport to the full page height and renders everything at once — without scrolling.

Disadvantages:

• Lazy-loaded images never trigger (they appear blank)
• Sticky elements repeat throughout the image
• Some CSS layouts break at extreme heights
• Memory-intensive for long pages

This is why extensions produce better scrolling screenshots than DevTools for most real-world pages.

Method 1: Chrome Extension (Recommended)

Using a scrolling screenshot extension is the most reliable approach.

Step by step:

1. Install a scrolling screenshot extension from the Chrome Web Store.
2. Navigate to the page you want to capture.
3. Click the extension icon and select "Full Page" or "Capture Full Page."
4. Watch as the extension scrolls through the page automatically — a progress indicator shows the capture status.
5. The complete screenshot opens in the editor.
6. Add annotations if needed — arrows, text, highlights, step numbers.
7. Save as PNG, export as PDF, or copy to clipboard.

What Happens During Auto-Scroll Capture

A good scrolling capture extension performs several steps during the process:

1. Measures the page — determines the total scrollable height.
2. Detects sticky elements — identifies position: fixed and position: sticky elements (navigation bars, cookie banners, floating buttons).
3. Hides sticky elements — temporarily removes them from view to prevent duplication.
4. Scrolls incrementally — moves down by one viewport height at a time.
5. Waits for content — pauses at each position for lazy-loaded images and dynamic content to render.
6. Captures each viewport — takes a screenshot of the visible area at each scroll position.
7. Stitches the result — combines all captures into one continuous image, aligning them pixel-perfectly.
8. Restores the page — returns sticky elements and scroll position to their original state.

This process typically takes 3-15 seconds depending on page length.

Method 2: Chrome DevTools

DevTools can capture a "full size screenshot" without scrolling, but with significant limitations.

Step by step:

1. Press F12 to open DevTools.
2. Press Ctrl+Shift+P (Cmd+Shift+P on Mac).
3. Type "screenshot" and select "Capture full size screenshot."
4. A PNG is saved to Downloads.

Why DevTools Struggles with Scrolling Pages

Since DevTools doesn't actually scroll, it misses content that depends on scrolling:

• Lazy-loaded images: Sites like Amazon, Pinterest, and most modern websites load images on demand. DevTools captures before they load.
• Infinite scroll: Social media feeds, search results, and product listings that load more content as you scroll — DevTools only captures what's already rendered.
• Scroll-triggered animations: Elements that animate in on scroll appear in their initial (often hidden) state.
• Virtualized lists: Some frameworks (React virtualized, Angular CDK) only render visible items. DevTools captures an empty container.

Method 3: Manual Scroll and Capture

If you can't use an extension or DevTools, you can manually scroll and stitch screenshots.

Step by step:

1. Scroll to the top of the page.
2. Take a screenshot of the visible area.
3. Scroll down, overlapping slightly with the previous capture.
4. Take another screenshot.
5. Repeat until you reach the bottom.
6. Open all screenshots in an image editor and manually align them.

Reality: This is impractical for anything longer than 2-3 screens. Alignment is never perfect, overlaps are inconsistent, and the process takes 10-20 minutes for a single page.

Common Problems and Solutions

Problem: Sticky Navigation Repeats in Every Section

Cause: The navigation bar has position: fixed and appears in every viewport capture.

Solution: A proper scrolling capture extension detects fixed elements and hides them during capture. DevTools cannot do this — there's no built-in workaround.

Problem: Blank White Spaces Where Images Should Be

Cause: Images use lazy loading (loading="lazy" or JavaScript-based) and haven't loaded yet.

Solution: Use an extension that scrolls naturally through the page, triggering image loads. Alternatively, in DevTools, you can run a console script to scroll through the page first, then capture — but this only partially solves the problem.

Problem: Page Too Long — Screenshot Fails

Cause: Chrome has memory limits for rendering very tall images. Pages exceeding ~15,000-20,000 pixels may fail in DevTools.

Solution: A scrolling extension captures in sections and stitches, avoiding memory issues. Capture Full Page handles pages up to 100,000 pixels.

Problem: Cookie Banner Covers Part of the Screenshot

Cause: Cookie consent popups use position: fixed and appear throughout the capture.

Solution: Either dismiss the banner before capturing, or use an extension that detects and hides fixed elements automatically.

Problem: Chat Widget Appears in Every Section

Cause: Floating chat buttons (Intercom, Drift, Zendesk) use position: fixed.

Solution: Same as above — the extension should detect and manage fixed elements. You can also manually hide the widget before capture by right-clicking → Inspect → deleting the element.

When to Use Each Method

Tips for Better Scrolling Screenshots

1. Wait for the page to fully load before starting capture. Check that all visible images and content have rendered.
2. Dismiss popups before capturing — cookie banners, newsletter modals, and chat widgets.
3. Close sticky notifications that might cover content.
4. Use a consistent viewport width — 1280px or 1440px are standard for desktop captures.
5. For very long pages, consider capturing sections separately if the full capture exceeds your needs.

Summary

Scrolling screenshots are the only way to capture entire webpages that extend below the visible viewport. A dedicated extension produces the best results by actually scrolling through the page, handling lazy loading and sticky elements automatically. DevTools works for short, simple pages but has fundamental limitations with modern web content. For reliable, high-quality scrolling captures, an extension is the right tool.