Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung von scrollTop in javascript_javascript skills

Detaillierte Erklärung von scrollTop in javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:04:501267Durchsuche

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:

Code kopieren Der Code lautet wie folgt:

var scrollTop = document.documentElement.scrollTop ||. window.pageYOfset ||document.body.scrollTop;

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:

var scrollTop = document.documentElement.scrollTop ||. window.pageYOffset ||


Der scrollTop-Wert kann unter allen Umständen durch diese Zuweisung erhalten werden.
Beobachten Sie diese Aufgabe genau, ist Ihnen etwas aufgefallen? ? Das ist richtig, window.pageYOffset (Safari) wird in der Mitte von || platziert.

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

Der Code lautet wie folgt: var scrollTop = document.documentElement.scrollTop ||. window.pageYOffset ||
DTD-bezogene Anweisungen:

Wenn die Seite eine DTD hat oder DOCTYPE angegeben ist, verwenden Sie document.documentElement.
Wenn die Seite keine DTD hat oder DOCTYPE nicht angegeben ist, wird document.body verwendet.

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

Der Code lautet wie folgt: var scrollTop = window.pageYOffset //für FF ||. document.documentElement.scrollTop ||. document.body.scrollTop
||. 0;

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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn