Wie mache ich einen Screenshot eines eingebetteten scrollbaren Bereichs auf einer Website?

Wenn Sie zur Walmart-Filialsuche gehen und Ihre Postleitzahl eingeben, erhalten Sie eine Liste mit 20 Filialen sowie eine Karte daneben. Ich möchte einen Screenshot der Karte UND der gesamten Liste machen. Es macht mir nichts aus, zwei Schritte zu machen: 1) die Karte und 2) die Liste.

Ich kann jedoch nicht herausfinden, wie ich einen Screenshot dieser langen Liste bekomme. Wie Sie sehen, ist nur ein kleiner Teil der Liste sichtbar. Es muss auch kein Screenshot sein. Ich würde mich mit dem Kopieren und Einfügen zufrieden geben, aber die Struktur der Liste wird dabei zerstört. Die Elemente auf der rechten Seite der Liste (Abholoptionen und In diesem Geschäft) werden am Ende eher nach unten als nach rechts verschoben.

screenshot

— Rolo
quelle

Antworten:

Nicht wirklich ein ganzseitiger Screenshot, da der Teil, der das Poster interessiert, ausgeblendet ist

Meine Lösung erfordert etwas Zappeln, funktioniert aber.

Ich werde es mit Firefox erklären, aber ähnliche Operationen können mit modernen Browsern durchgeführt werden, die alle jetzt einen eingebauten HTML / CSS-Inspektor haben.

Klicken Sie mit der rechten Maustaste in die scrollbare Liste, ganz in der Nähe der oberen linken Ecke, und wählen Sie "Element untersuchen": Ein Fenster mit HTML-Code auf der linken Seite und CSS auf der rechten Seite wird geöffnet
Suchen Sie in der HTML-Code-Anzeige nach einem Eintrag mit der Aufschrift <div id="resultStores" style="height:311px;"></div>. Bearbeiten Sie diesen Eintrag und ersetzen Sie die Zahl zwischen height: und px; mit dem Wort auto

= & gt; <div id="resultStores" style="height:auto;"></div>

Schauen Sie über diesen Eintrag, finden Sie eine andere div, <div id="searchInfo">
Beachten Sie im CSS-Bereich rechts einen Block mit dem Titel #searchinfo mit overflow: hidden drin. Ersetzen Sie das Wort hidden mit dem Wort visible

Tada, Ihre Seite sollte jetzt die vollständige Liste anzeigen

Machen Sie sich mit dem Vorgang vertraut und installieren Sie jetzt ein ganzseitiges Screenshot-Dienstprogramm. Mit Firefox empfehle ich die Feuerschuss Plugin.

eingestellte Höhe von <div id="resultStores"> zu auto
Überlauf von einstellen <div id="searchInfo"> zu visible
Mit demselben Inspektorwerkzeug können Sie auch die beiden Blöcke in der Fußzeile entfernen, die im Weg stehen und einen Teil des Screenshots verderben: Klicken Sie mit der rechten Maustaste, um diese Elemente zu inspizieren, klicken Sie erneut mit der rechten Maustaste, um den Knoten zu entfernen, und wiederholen Sie den Vorgang.
Klicken Sie mit der rechten Maustaste auf die Seite und erfassen Sie mit FireShot die gesamte Seite.

Et voilà :)

Hoffentlich hilft das.

— Sxilderik
quelle

Es gibt noch ein kleines Problem. Die Anzeigen im unteren Bereich werden in der Liste angezeigt. Mit anderen Worten ist die Liste transparent. P.S. Ich habe versucht, das zu tun, was Sie hier vorgeschlagen haben, aber ich habe nur die 311 px geändert und wusste nichts über den zweiten Teil und hätte es auch nicht herausgefunden.

— Rolo

Verwenden Sie, wie gesagt, den Inspektor, um die Anzeigen und die Fußzeile zu entfernen. Wenn Sie Firefox oder Chrome verwenden, können Sie AdBlockPlus verwenden, um alle Werbeanzeigen zu entfernen. :)

— Sxilderik

Ich habe das mit Firebug in Firefox gemacht. Ich verstehe nicht, wie es mit dem Firefox Inspector funktioniert. ich suche nach 311px und nichts kommt auf. Hat die Walmart-Seite auch wirklich kein / body und / html oder sind sie in einem der js-Skripte enthalten?

— Rolo

Ich benutze FireBug routinemäßig auch, aber da Sie nichts über den verwendeten Browser oder Ihre Kenntnisse in diesem Bereich gesagt haben, habe ich mich für einfach und standardisiert entschieden. Wenn Sie direkt in der oberen linken Ecke "inspizieren" (mit dem eingebauten FF-Inspektor), sollte die Höhe: 311px sofort angezeigt werden. Was die Walmart-Seite betrifft, so scheint es tatsächlich so zu sein, dass der Codierer sich dafür entschieden hat, faul zu sein und das Schließen der HTML- und Body-Tags wegzulassen, da er vermutet, dass der Browser dies problemlos bewältigen wird. Nicht sehr sauber Codierung imho.

— Sxilderik

Was Sie suchen, ist ein "ganzseitiger Screenshot". Da Sie nicht angegeben haben, welchen Browser Sie verwenden, ist es schwierig, eine Anwendung zu empfehlen. Hier einige Beispiele:

http://www.designer-daily.com/5-ways-to-capture-full-webpage-screenshots-15291 http://www.techsmith.com/snagit.html

— Craig Watson
quelle

Ich möchte nur einen Teil der ganzen Seite. Eines der auf der Seite, auf die Sie mich verwiesen haben, erwähnten Programme ist Fireshot, das ich bereits besitze. Es gibt keine Möglichkeit, einen Screenshot nur des eingebetteten scrollbaren Teils zu machen.

— Rolo

Sie könnten das gesamte Ansichtsfenster scannen und dann auf den tatsächlich benötigten Teil zuschneiden?

— Craig Watson

Sie scheinen das Problem nicht zu verstehen. Für den Teil, den ich brauche, ist nur ein Teil davon sichtbar. Ich muss scrollen, um den Rest zu sehen (und ich meine nicht die gesamte Webseite scrollen, sondern einen eingebetteten Teil).

— Rolo