VKT Toolkit · 11. September 2026 · 9 Min. Lesezeit

Screenshots von scrollbaren Seiten in Chrome erstellen — Wenn Lazy Load und Infinite Scroll alles brechen

Sie drücken die Screenshot-Taste. Das Tool scrollt nach unten, erfasst einige Viewports und setzt sie zusammen. Das Ergebnis: Das obere Drittel sieht gut aus, die Mitte zeigt leere weiße Rechtecke, wo Bilder sein sollten, und die untere Hälfte fehlt ganz, weil die Seite beim Scrollen des Tools weiterhin neue Inhalte geladen hat. Kommt Ihnen das bekannt vor?

Moderne Webseiten sind keine statischen Dokumente. Sie laden Bilder beim Scrollen (Lazy Loading), fügen beim Erreichen des Seitenendes neue Inhalte hinzu (Infinite Scroll), fixieren Header und Navigationsleisten am Viewport (position: fixed) und blockieren manchmal Rechtsklick oder Auswahl komplett. Ein Screenshot-Tool, das blind scrollt und Pixel erfasst, wird auf diesen Seiten versagen. Dieser Leitfaden erklärt, warum es fehlschlägt und wie Sie diese Seiten korrekt erfassen.

Warum Standard-Screenshot-Tools bei modernen Seiten versagen

Es gibt drei unterschiedliche Probleme, und die meisten Tools lösen nur eines:

Ein Tool, das einfach scrollt und Pixel erfasst, produziert ein Bild mit leeren Abschnitten, duplizierten Headern und fehlendem Inhalt. Die Lösung erfordert, dass das Tool aktiv mit der Seite interagiert — Lazy Loads auslöst, wartet bis der Inhalt gerendert ist und feste Elemente behandelt.

Der richtige Ansatz: Scrollen, Warten, Erfassen

Ein ordentliches Scroll-Screenshot-Tool scrollt nicht einfach und greift Pixel ab. Es folgt einer Drei-Schleife für jede Viewport-Höhe der Seite:

1. Scrollen zum nächsten Abschnitt;
2. Warten bis der Browser das Laden abgeschlossen hat — Bilder, Schriften, dynamischer Inhalt. Ein gutes Tool beobachtet, bis sich das Netzwerk beruhigt und das Layout stabilisiert, bevor es erfasst;
3. Erfassen dieses Viewport-Segments, dann weiter zum nächsten.

Nachdem alle Segmente erfasst sind, setzt das Tool sie zu einem Bild zusammen, entfernt überlappende Bereiche (wie den sticky Header, der in jedem Segment erscheint) und dedupliziert feste Elemente.

Genau das macht VKT PageShot. Die Vollbild-Erfassung scrollt schrittweise, wartet auf nachgeladene Inhalte in jedem Abschnitt und setzt das Ergebnis zu einem sauberen, vollständigen Bild zusammen — keine leeren Rechtecke, keine duplizierten Header.

So erfassen Sie eine Lazy-Load-Seite (Schritt für Schritt)

Szenario: Sie möchten eine gesamte Produktkatalog-Seite, einen Nachrichtenartikel oder eine Dokumentationsseite erfassen, die Bilder beim Scrollen lädt.

1. Öffnen Sie die Seite und warten Sie, bis der anfängliche Inhalt oberhalb der Falzlinie vollständig geladen ist (Bilder, Schriften, Layout);
2. Klicken Sie auf das PageShot-Symbol in Ihrer Symbolleiste;
3. Wählen Sie „Vollbild" als Erfassungsmodus;
4. PageShot scrollt automatisch. Bei jeder Viewport-Höhe pausiert es und wartet, bis nachgeladene Bilder vollständig gerendert sind, bevor es dieses Segment erfasst. Sie können den Fortschrittsindikator beobachten;
5. Wenn fertig, öffnet sich das Vollbild-Bild im Vorschaueditor von PageShot. Jedes Bild, jeder Abschnitt — erfasst, als wäre die gesamte Seite auf ein langes Blatt Papier gedruckt;
6. Speichern als PNG, JPG oder in die Zwischenablage kopieren. Oder als PDF exportieren zur Archivierung.

Das war's. Kein manuelles Scrollen, keine leeren Rechtecke, kein manuelles Zusammensetzen.

So erfassen Sie eine Infinite-Scroll-Seite (Twitter, Instagram, Reddit)

Infinite-Scroll-Seiten haben kein natürliches Ende — die Seite lädt kontinuierlich neue Inhalte, wenn Sie sich dem Ende nähern. Das bedeutet, Sie müssen im Voraus entscheiden, wie viel Sie erfassen möchten, und es dann vorladen.

Die Strategie:

1. Scrollen Sie zuerst manuell nach unten. Laden Sie so viele Inhalte, wie Sie erfassen möchten. Für einen Twitter-Thread scrollen Sie bis zum letzten Tweet, den Sie wollen. Für einen Reddit-Kommentarbereich scrollen Sie bis zu den Kommentaren, die Sie interessieren. Jedes Scrollen löst das Laden weiterer Inhalte aus;
2. Stoppen Sie das Scrollen und warten Sie einige Sekunden, bis die letzte Charge an Inhalten fertig gerendert ist;
3. Verwenden Sie jetzt die Vollbild-Erfassung von PageShot. Sie erfasst alles, was geladen wurde — von oben bis zu dem Punkt, an dem Sie aufgehört haben zu scrollen. Da der Inhalt bereits geladen ist, gibt es nichts nachzuladen und nichts zu verpassen;
4. Speichern oder exportieren.

Wichtige Einschränkung: Infinite-Scroll-Seiten können extrem lang werden, wenn Sie viele Inhalte geladen haben. Ein Twitter-Thread mit 200 Tweets kann leicht über 50.000 Pixel hoch sein. PageShot kommt mit sehr langen Seiten gut zurecht, aber die resultierende Bilddatei wird groß (5–15 MB). Wenn Sie nur einen Abschnitt brauchen, verwenden Sie stattdessen den Erfassungsmodus Sichtbarer Bereich oder Auswahl.

So erfassen Sie Seiten mit sticky Headern (ohne Duplikate)

Fast jede moderne Webseite hat eine sticky Navigationsleiste — den Header, der beim Scrollen oben auf dem Bildschirm bleibt. Wenn ein Screenshot-Tool Viewport-Segmente erfasst und zusammenfügt, erscheint dieser Header in jedem einzelnen Segment, was zu einem Endergebnis mit der gleichen Navigationsleiste alle 800 Pixel führt.

Die Lösung: Ein intelligenter Stitching-Algorithmus erkennt, welche Elemente position: fixed oder position: sticky haben, und behält sie nur einmal — im ersten Viewport-Segment. Jedes nachfolgende Segment hat den sticky Bereich vor dem Zusammensetzen entfernt.

PageShot macht dies automatisch. Sie müssen nichts konfigurieren. Der sticky Header erscheint einmal oben im finalen Bild, und jeder andere Abschnitt zeigt nur den scrollbaren Inhalt darunter.

Wenn Sie ein anderes Tool verwenden, das sticky Elemente nicht behandelt, gibt es zwei Workarounds:

• CSS-Überschreibung: Öffnen Sie DevTools (F12), finden Sie das sticky Element und setzen Sie position: static !important; im Styles-Panel. Das zwingt den Header, normal zu scrollen. Nehmen Sie dann Ihren Screenshot auf. Denken Sie daran, die Änderung rückgängig zu machen;
• Als PDF drucken: Strg+P → Als PDF speichern. Das Drucklayout unterdrückt in der Regel sticky Elemente. Konvertieren Sie dann bei Bedarf das PDF in ein Bild.

So erfassen Sie Seiten, die Screenshots blockieren

Einige Seiten — insbesondere Streaming-Plattformen, Online-Prüfungsportale und DRM-geschützte Inhalte — versuchen, Screenshots zu verhindern. Der Ansatz hängt davon ab, welche Art der Blockierung sie verwenden:

• Rechtsklick-/Kontextmenü-Blockierung: Das verhindert keine Screenshots. Verwenden Sie das Erweiterungssymbol in Ihrer Symbolleiste, nicht das Rechtsklick-Menü. PageShot erfasst über die Symbolleisten-Schaltfläche und Tastenkürzel und umgeht Kontextmenü-Blockierungen vollständig;
• JavaScript-Event-Listener: Einige Seiten lauschen auf Tastaturereignisse (Druck-Taste, Strg+Shift+S) und unterdrücken sie. PageShot verwendet Chromes activeTab- und tabs-APIs, die auf einer Ebene arbeiten, die das Seiten-JavaScript nicht abfangen kann;
• DRM / Encrypted Media Extensions: Streaming-Dienste (Netflix, Disney+) verwenden Hardware-Level-DRM. Screenshots von DRM-geschütztem Videoinhalt erscheinen als schwarzes Rechteck. Das ist eine Browser-Einschränkung, die keine Erweiterung umgehen kann — und der Versuch dazu kann gegen die Nutzungsbedingungen der Seite verstoßen.

Für die ersten beiden Fälle funktioniert PageShot ohne besondere Konfiguration. Für DRM-Inhalte wird kein Screenshot-Tool helfen — das ist so gewollt.

Lange Seiten auf Mobilgeräten erfassen (über Chrome Desktop)

Wenn Sie eine mobile Version einer Webseite erfassen müssen — das responsive Layout, das Handys sehen — können Sie es in Chromes Desktop-DevTools simulieren:

1. Drücken Sie F12, um die DevTools zu öffnen;
2. Klicken Sie auf die Schaltfläche Geräte-Toolbar umschalten (Telefon-Symbol, oder Strg+Shift+M);
3. Wählen Sie ein Mobilgerät aus dem Dropdown (z. B. iPhone 14 Pro, Pixel 7);
4. Navigieren Sie zu Ihrer Seite. Das mobile Layout wird geladen;
5. Verwenden Sie die Vollbild-Erfassung von PageShot wie gewohnt. Sie erfasst das mobile responsive Layout.

Das ist nützlich zum Archivieren mobiler Layouts, zum Testen responsiver Designs oder zum Erfassen von Inhalten, die auf Handys anders aussehen.

Vergleich: 4 Wege, eine scrollbare Seite zu erfassen

Jede Methode hat ihre Daseinsberechtigung. DevTools ist schnell für einen schnellen Griff. Als PDF drucken ist am einfachsten, wenn Sie ein PDF brauchen. GoFullPage ist eine solide Alternative. Und PageShot kombiniert Scrollen-Warten-Erfassen, sticky-Header-Entfernung, Annotation und PDF-Export in einem Tool.

Fehlerbehebung: Häufige Probleme bei Scroll-Screenshots

Leere Rechtecke, wo Bilder sein sollten

Das Screenshot-Tool hat gescrollt, bevor die Bilder geladen waren. Lösung: Verwenden Sie ein Tool, das auf jeden Abschnitt wartet (PageShot macht das). Wenn Sie DevTools verwenden, versuchen Sie, zuerst manuell nach unten zu scrollen, um alles vorzuladen, und erfassen Sie dann.

Der Screenshot stoppt zu früh — die Unterseite der Seite fehlt

Das Tool denkt, es hat das Ende erreicht, aber die Seite hat mehr Inhalt. Das passiert oft bei Seiten, die overflow: hidden am Body verwenden, aber auf einem Kind-Container scrollen. PageShot erkennt das tatsächliche scrollbare Element, nicht nur den Body.

Duplizierte Header und Navigationsleisten

Das Tool entfernt sticky/feste Elemente nicht während des Stitchings. Verwenden Sie PageShot (automatische sticky-Entfernung) oder setzen Sie das sticky Element manuell in DevTools auf position: static, bevor Sie erfassen.

Die Seite lädt neue Inhalte während der Erfassung, was zu Fehlern führt

Einige dynamische Seiten (Live-Dashboards, Echtzeit-Feeds) ändern den Inhalt während der Screenshot-Aufnahme. Lösung: Pausieren Sie jede Auto-Aktualisierung oder Echtzeit-Aktualisierung vor der Erfassung, oder verwenden Sie eine Ein-Viewport-Erfassung statt Vollbild.

Häufig gestellte Fragen

Fazit

Moderne Webseiten sind nicht statisch — sie laden beim Scrollen, fügen bei Bedarf hinzu und fixieren Elemente am Viewport. Ein Screenshot-Tool, das sie wie statische Dokumente behandelt, produziert defekte Bilder. Die Lösung ist ein Tool, das mit Geduld scrollt: auf jeden Abschnitt warten, sticky Elemente behandeln und sauber zusammensetzen. Das macht PageShot, und es ist kostenlos.

Weitere Anleitungen im VKT-Blog; Fragen an [email protected].