Screenshotting a page with infinite scroll

Every capture begins by measuring the document height. On an infinite feed that number is a snapshot of a value that changes as you approach it, which is why a capture of a feed can behave unpredictably: it measures 8,000 pixels, starts scrolling, and by the time it reaches the bottom the page is 14,000 pixels tall.

Some tools chase the growing document, which produces a capture that only ends when the feed does. Some measure once and stop early. Neither is wrong exactly, because the question is not well posed. It is a different failure from a capture that is cut off at the bottom, where the page did have an end and the tool missed it.

Getting a predictable result

1. 1

   Decide where you want it to end

   A date, a specific post, a number of items. Infinite feeds need a human decision about scope.

2. 2

   Scroll to that point manually

   Let each batch finish loading as you go rather than flinging to the bottom.

3. 3

   Wait until nothing more appears

   Give it three seconds of stillness. A capture started while a batch is arriving will catch a loading spinner mid-page.

4. 4

   Scroll back to the top and capture

   The document is now a fixed height, and everything in it has loaded. If the result is very tall, exporting to PDF is usually easier to read than one enormous image.

Two complications specific to feeds

Virtualised rendering

Some feeds destroy items after you scroll past them, keeping only a window of the list in the DOM. No capture can photograph content that is no longer there. If scrolling back up shows items re-appearing with a flash, the feed is virtualised. See pages that scroll inside a panel.

Content that reorders

A feed that inserts new items at the top while you are capturing shifts everything down mid-run, which produces duplicated or missing items at a join. Pausing live updates, where the site allows it, avoids this.