VKT Toolkit · September 11, 2026 · 9 min read

How to Screenshot a Scrolling Page in Chrome — When Lazy Load and Infinite Scroll Break Everything

You press the screenshot button. The tool scrolls down, captures a few viewports, and stitches them together. The result: the top third looks fine, the middle is blank white rectangles where images should be, and the bottom half is missing entirely because the page kept loading new content as the tool scrolled past it. Sound familiar?

Modern web pages are not static documents. They load images on scroll (lazy loading), append new content as you reach the bottom (infinite scroll), stick headers and nav bars to the viewport (position: fixed), and sometimes block right-click or selection entirely. A screenshot tool that scrolls blindly and captures pixels will fail on these pages. This guide covers why it fails, and how to capture these pages correctly.

Why Standard Screenshot Tools Fail on Modern Pages

There are three distinct problems, and most tools only solve one:

A tool that simply scrolls and captures pixels will produce an image with blank sections, duplicated headers, and missing content. The fix requires the tool to actively interact with the page — triggering lazy loads, waiting for content to render, and handling fixed elements.

The Correct Approach: Scroll, Wait, Capture

A proper scrolling screenshot tool does not just scroll and grab pixels. It follows a three-step loop for each viewport-height of the page:

1. Scroll to the next section;
2. Wait for the browser to finish loading — images, fonts, dynamic content. A good tool watches for the network to settle and the layout to stabilize before it captures;
3. Capture that viewport slice, then move on.

After all slices are captured, the tool stitches them into one image, removing overlapping areas (like the sticky header that appears in every slice) and deduplicating fixed elements.

This is exactly what VKT PageShot does. Its full-page capture scrolls incrementally, waits for lazy-loaded content to render in each section, and stitches the result into a clean, complete image — no blank rectangles, no duplicated headers.

How to Capture a Lazy-Load Page (Step by Step)

Scenario: You want to capture an entire product catalog page, news article, or documentation page that loads images as you scroll.

1. Open the page and wait for the initial above-the-fold content to fully load (images, fonts, layout);
2. Click the PageShot icon in your toolbar;
3. Select "Full Page" capture mode;
4. PageShot scrolls automatically. At each viewport height, it pauses and waits for any lazy-loaded images to finish rendering before capturing that slice. You can watch the progress indicator;
5. When complete, the full-page image opens in PageShot's preview editor. Every image, every section — captured as if the entire page were printed on one long piece of paper;
6. Save as PNG, JPG, or copy to clipboard. Or export as PDF for archiving.

That is it. No manual scrolling, no blank rectangles, no stitching by hand.

How to Capture an Infinite Scroll Page (Twitter, Instagram, Reddit)

Infinite scroll pages have no natural end — the page keeps loading content as you approach the bottom. This means you need to decide in advance how much you want to capture, then pre-load it.

The strategy:

1. Scroll down manually first. Load as much content as you want to capture. For a Twitter thread, scroll until you see the last tweet you want. For a Reddit comment section, scroll until you reach the comments you care about. Each scroll triggers the page to load more content;
2. Stop scrolling and wait a few seconds for the last batch of content to finish rendering;
3. Now use PageShot's full-page capture. It will capture everything that has loaded — from the top of the page to wherever you stopped scrolling. Since the content is already loaded, there is nothing to lazy-load and nothing to miss;
4. Save or export.

Important caveat: infinite scroll pages can be extremely long once you have loaded a lot of content. A Twitter thread with 200 tweets can easily be 50,000+ pixels tall. PageShot handles very long pages well, but the resulting image file will be large (5–15 MB). If you only need a section, use Visible Area or Selection capture mode instead.

How to Capture Pages with Sticky Headers (Without Duplicates)

Almost every modern website has a sticky navigation bar — the header that stays at the top of the screen as you scroll. When a screenshot tool captures viewport slices and stitches them together, that header appears in every single slice, resulting in a final image with the same nav bar repeated every 800 pixels.

The fix: a smart stitching algorithm detects which elements are position: fixed or position: sticky, and keeps them only once — in the first viewport slice. Every subsequent slice has the sticky area removed before stitching.

PageShot does this automatically. You do not need to configure anything. The sticky header appears once at the top of the final image, and every other section shows only the scrollable content beneath it.

If you are using a different tool that does not handle sticky elements, you have two workarounds:

• CSS override: Open DevTools (F12), find the sticky element, and set position: static !important; in the Styles panel. This forces the header to scroll normally. Then take your screenshot. Remember to undo the change afterward;
• Print to PDF: Ctrl+P → Save as PDF. The print layout usually suppresses sticky elements. Then convert the PDF to an image if needed.

How to Capture Pages That Block Screenshots

Some sites — particularly streaming platforms, online exam portals, and DRM-protected content — try to prevent screenshots. The approach depends on what kind of blocking they use:

• Right-click / context menu block: This does not actually prevent screenshots. Use the extension icon in your toolbar, not the right-click menu. PageShot captures via the toolbar button and keyboard shortcuts, bypassing context menu blocks entirely;
• JavaScript event listeners: Some sites listen for keyboard events (Print Screen, Ctrl+Shift+S) and suppress them. PageShot uses Chrome's activeTab and tabs APIs, which operate at a level the page JavaScript cannot intercept;
• DRM / Encrypted Media Extensions: Streaming services (Netflix, Disney+) use hardware-level DRM. Screenshots of DRM-protected video content will appear as a black rectangle. This is a browser-level restriction that no extension can bypass — and attempting to do so may violate the site's terms of service.

For the first two cases, PageShot works without any special configuration. For DRM content, no screenshot tool will help — that is by design.

Capturing Long Pages on Mobile (via Chrome Desktop)

If you need to capture a mobile version of a website — the responsive layout that phones see — you can simulate it in Chrome's desktop DevTools:

1. Press F12 to open DevTools;
2. Click the Toggle Device Toolbar button (phone icon, or Ctrl+Shift+M);
3. Select a mobile device from the dropdown (e.g., iPhone 14 Pro, Pixel 7);
4. Navigate to your page. The mobile layout will load;
5. Use PageShot's full-page capture as normal. It will capture the mobile responsive layout.

This is useful for archiving mobile-specific layouts, testing responsive design, or capturing content that looks different on phones.

Comparison: 4 Ways to Capture a Scrolling Page

Each method has its place. DevTools is fast for a quick grab. Print-to-PDF is the simplest when you need a PDF. GoFullPage is a solid alternative. And PageShot combines scroll-wait-capture, sticky-header removal, annotation, and PDF export in one tool.

Troubleshooting: Common Scrolling Screenshot Problems

Blank rectangles where images should be

The screenshot tool scrolled before the images loaded. Solution: use a tool that waits for each section (PageShot does this). If using DevTools, try manually scrolling to the bottom first to preload everything, then capture.

The screenshot stops too early — missing the bottom of the page

The tool thinks it has reached the bottom, but the page has more content. This often happens with pages that use overflow: hidden on the body but scroll on a child container. PageShot detects the actual scrollable element, not just the body.

Duplicated headers and nav bars

The tool is not removing sticky/fixed elements during stitching. Use PageShot (automatic sticky removal) or manually set the sticky element to position: static in DevTools before capturing.

The page loads new content mid-capture, creating a mismatch

Some dynamic pages (live dashboards, real-time feeds) change content while the screenshot is being taken. Solution: pause any auto-refresh or real-time updates before capturing, or use a single-viewport capture instead of full-page.

FAQ

The Bottom Line

Modern web pages are not static — they load on scroll, append on demand, and stick elements to the viewport. A screenshot tool that treats them like static documents will produce broken images. The fix is a tool that scrolls with patience: wait for each section, handle sticky elements, and stitch cleanly. That is what PageShot does, and it does it for free.

More guides in the VKT blog; questions to [email protected].