Detaillierte Erläuterung des Kompatibilitätsproblems zwischen dem Seiten-Scroll-Wert scrollTop zwischen FireFox und Chrome browsers_jquery

Ich habe kürzlich an einem Projekt gearbeitet, das eine Verzeichnisfunktion enthielt, und dabei einen Fehler oder einen sogenannten Unterschied zwischen modernen Browsern gefunden, nämlich bei der Erfassung und Einstellung des Seiten-Scroll-Werts (scrollTop).

Lassen Sie uns vorher über die Koordinatenerfassung von Seitenelementen sprechen. Die Klassizität dieses Bildes muss nicht noch einmal erwähnt werden.

Funktion zum Scrollen zu einer bestimmten Position implementieren

Eine der wichtigsten Funktionen des Blog-Verzeichnisses ist das Scrollen der Seite durch Klicken auf den Titel. Da wir zu einem bestimmten Titel auf der Seite scrollen möchten, müssen wir die spezifische absolute Position des Scroll-Elements berechnen. und der häufig verwendete OffsetTop dient zum Abrufen des aktuellen Elements und des nächstgelegenen Elements, das seine Positionierung bestimmt. Dies gilt hier nicht.

Hier sollte die vom Browser nativ bereitgestellte getBoundingClientRect-Schnittstelle verwendet werden. Diese Funktion gibt die absolute Position des Elements von jedem Rand des Browsers zurück, unabhängig vom Positionierungstyp. Sie eignet sich sehr gut zum Erstellen von Seiten-Scroll-Effekten.

Informationen zur spezifischen Verwendung der getBoundingClientRect-Funktion finden Sie unter den folgenden Links: Link 1, Link 2.

Erhalten Sie die zum Scrollen erforderlichen Daten. Der ScrollTop-Bereich ist die Höhe, auf der die Seite durch Scrollen ausgeblendet wurde. Anschließend erhalten Sie den Abstand zwischen dem Element und dem oberen Rand des Browsers kann die erforderliche Scrollhöhe berechnen. Das Beziehungsdiagramm lautet wie folgt:

Die Position, zu der die Seite gescrollt werden soll, ist dann:

Code kopieren Der Code lautet wie folgt:

document.body.scrollTop element.getBoundingClientRect().top;

Hier ist übrigens der Unterschied zwischen den Elementen, die von getBoundingClientRect().top erhalten werden, wenn sie durch Scrollen ausgeblendet werden, und wenn sie nicht gescrollt werden:

Wie aus der obigen Abbildung ersichtlich ist, ist der erhaltene obere Wert eine negative Zahl und die berechnete Seitenhöhe ist immer noch korrekt, selbst wenn das zu scrollende Element außerhalb der Browsergrenze liegt.

Die Funktion zum Klicken auf den Verzeichnissprung ist abgeschlossen und bisher perfekt.

Kompatibilitätsprobleme zwischen FireFox und Chromes scrollTop

Bis ich heute FireFox getestet habe, habe ich festgestellt, dass die Sprungfunktion des Seitenscrollens unter Firefox nicht verwendet werden kann.

1. Nativer Schnittstellentest

Lass es mich zuerst erwähnen:

document.documentElement ist das 100db36a723c770d327fc0aef2ce13b1-Element und document.body ist das 6c04bd5ca3fcae76e30b72ad730ca86d

Testergebnisse zeigen, dass die Scrollhöhe der Seite bei Firefox nur über das HTML-Element abgerufen und festgelegt werden kann, während sie bei Google nur über das Body-Element abgerufen und festgelegt werden kann.

2. JQuery-Schnittstellentest

Das Obige verwendet zum Abrufen und Festlegen das native scrollTop-Attribut, und jquery selbst implementiert auch die Kapselung des scrollTop-Attributs. Sie können die Kompatibilität testen.

Ich freue mich sehr, dass $(document) verwendet werden kann, um Kompatibilität mit dem Abrufen und Festlegen von scrollTop zu erreichen.

3. ScrollTop-Animationsimplementierungstest

Obwohl die Kompatibilität erreicht ist, hoffe ich, die Animation zu verwenden, um zu einer bestimmten Position auf der Seite zu scrollen, anstatt direkt zu springen. Dies wird mithilfe der Animationsfunktion von jquery erreicht.

Ich habe festgestellt, dass $(document) zwar zum Erfassen und Festlegen verwendet werden kann, Animationseffekte jedoch nicht verwendet werden können und nur mithilfe von Body-Elementen und HTML-Elementen erzielt werden können.

Endlösung

Der perfekteste Umsetzungsplan ist:

Erhalten Sie die aktuelle Bildlaufhöhe der Seite oder legen Sie sie direkt fest:

$(document).scrollTop();//获取，兼容火狐谷歌 

Stellen Sie die aktuelle Scrollhöhe der Seite mit Animationseffekt ein:

$("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌 

Sie können auf den Verzeichnislink oben in diesem Artikel klicken, um den endgültigen Effekt anzuzeigen:

jQuery-CSS-Operation – scrollTop()-Methode

Beispiel

Legen Sie den vertikalen Versatz der Bildlaufleiste im dc6dce4a544fdca2df29d5ac0ea9906b-Element fest:

$(".btn1").click(function(){
 $("div").scrollLeft(100);
});

Definition und Verwendung

Die

scrollTop()-Methode gibt die vertikale Position der Bildlaufleiste des passenden Elements zurück oder legt sie fest.
Scroll-Top-Offset bezieht sich auf den Offset der Bildlaufleiste relativ zu ihrer Oberseite.
Wenn diese Methode keine Parameter festlegt, wird der Versatz in Pixel vom oberen Rand der Bildlaufleiste zurückgegeben.

Grammatik

$(selector).scrollTop(offset)

参数	描述
offset	可选。规定相对滚动条顶部的偏移，以像素计。

Tipps und Hinweise

Hinweis: Diese Methode gilt sowohl für sichtbare als auch für unsichtbare Elemente.
Hinweis: Wenn diese Methode zum Abrufen eines Werts verwendet wird, gibt sie nur den oberen Scroll-Offset des ersten übereinstimmenden Elements zurück.
Hinweis: Wenn diese Methode zum Festlegen eines Werts verwendet wird, legt sie den oberen Scroll-Offset aller übereinstimmenden Elemente fest.