Heim > Artikel > Web-Frontend > Detaillierte Erklärung von scrollTop in javascript_javascript skills
scrollTop stellt die Höhe des Bildlaufs dar. Standardmäßig beginnt der Bildlauf bei Position:0;. Der Versatz von scrollTop (Offset) stellt den Versatz von oben dar,
Die Scrollhöhe von scrollTop() kann sowohl den Scrollwert „setzen“ als auch den Scrollwert „abrufen“.
Wenn ein Scroll-Wert festgelegt ist, legt diese Methode den Scroll-Wert für alle übereinstimmenden Elemente fest.
Beim Abrufen des Bildlaufwerts gibt diese Methode nur die Bildlaufposition des ersten übereinstimmenden Elements zurück.
Um den Wert von scrollTop zu erhalten, können Sie auf den folgenden Code verweisen:
1. Unterschiede in scrollTop zwischen Browsern
IE6/7/8:
Für Seiten ohne Doctype-Deklaration können Sie document.body.scrollTop verwenden, um die scrollTop-Höhe
abzurufen
Für Seiten mit Doctype-Deklaration können Sie document.documentElement.scrollTop;
Safari:
Safari ist etwas Besonderes, es hat eine eigene Funktion zum Abrufen von scrollTop: window.pageYOffset;
Firefox:
Firefox und andere relativ standardmäßige Browser sind viel sorgenfreier, verwenden Sie einfach document.documentElement.scrollTop ;
2. ScrollTop-Wert abrufen
Erhalten Sie perfekt die scrollTop-Aufgabenphrase:
Denn wenn die Zahl 0 mit undefine ODER-verknüpft wird, gibt das System standardmäßig den letzten Wert zurück. Das heißt, 0 == undefine in OR-Operation;
Wenn sich die Bildlaufleiste der Seite ganz oben befindet, d. h. wenn der scrollTop-Wert 0 ist. Unter IE gibt window.pageYOffset (Safari) zu diesem Zeitpunkt undefine zurück, wenn window.pageYOffset (Safari) am Ende der OR-Operation platziert wird. Wenn undefine in der nächsten Operation verwendet wird, wird ein Fehler angezeigt gemeldet.
Andere Browser geben „unfine“ nicht zurück, unabhängig von der scrollTop-Zuweisung oder der Operationsreihenfolge. Es kann sicher verwendet werden.
Letztendlich ist es also immer noch das Problem des IE...
Ich bin etwas verwirrt, ich weiß nicht, ob ich mich klar ausdrücken kann.
Aber am Ende bin ich zu dem Schluss gekommen, dass dieser Satz getestet wurde und in Ordnung ist, sodass Sie ihn bedenkenlos verwenden können
Code kopieren
Dies gilt sowohl für IE als auch für Firefox.
Aus Kompatibilitätsgründen können Sie unabhängig davon, ob eine DTD vorhanden ist, den folgenden Code verwenden:
Code kopieren
DocumentElement- und körperbezogene Anweisungen:
body ist der untergeordnete Körperknoten im DOM-Objekt, also das
-Tag; documentElement ist der Wurzelknoten des gesamten Knotenbaums, der das-Tag ist
DOM nennt jedes Objekt in der Hierarchie einen Knoten, der eine hierarchische Struktur darstellt, genau wie unser Verzeichnis, ein Stammverzeichnis, und es gibt auch Unterverzeichnisse unter dem Stammverzeichnis unter dem Verzeichnis.Nehmen Sie als Beispiel die HTML Hypertext Markup Language: Eine Wurzel des gesamten Dokuments ist, auf die über document.documentElement im DOM zugegriffen werden kann. Es ist der Wurzelknoten des gesamten Knotenbaums. Der Body ist ein untergeordneter Knoten. Um auf das Body-Tag zuzugreifen, sollten Sie Folgendes in das Skript schreiben:
Wenn Sie auf die Schaltfläche klicken möchten, um zum Seitenanfang zu scrollen, klicken Sie mit jquery darauf und führen Sie den Code $(document).scrollTop(0) aus, um nach oben zu scrollen.
Die gleiche Bildlaufposition scrollLeft gibt die Position an, an der nach links gescrollt wird.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.