Detaillierte Erläuterung der drei Möglichkeiten, die Funktion zum reibungslosen Scrollen der Seite nach oben zu erreichen

Seit Kurzem verfügt das öffentliche Konto H5 des Entwicklungsunternehmens über eine Funktion, mit der man durch Klicken auf das Symbol nach oben scrollen kann. Die Funktion ist relativ einfach zu implementieren. Rufen Sie einfach window.scrollTo(0, 0) direkt auf und vervollständigen Sie sie in einer Codezeile. Aber wie konnte ich als Belagerungslöwe so niedrige Anforderungen an mich selbst stellen, also habe ich eine Anforderung an mich selbst hinzugefügt, um die Funktion des reibungslosen Scrollens der Seite nach oben zu realisieren. Nach Recherche und Sichtung der Unterlagen haben wir folgende drei Möglichkeiten.

Das höchste Maß an Funktionalität kann nur mit CSS erreicht werden. Der Code lautet wie folgt:

 html { scroll-behavior: glatt;}

Die Funktion dieses Stils besteht darin, ein Bildlaufverhalten für Elemente mit Bildlaufleisten anzugeben. Er wird jedoch nur wirksam, wenn der Benutzer manuell navigiert oder die CSSOM-Bildlauf-API einen Bildlauf auslöst, und hat keinen Einfluss auf das durch das Benutzerverhalten verursachte Bildlaufverhalten. Gerade als ich feierte, öffnete ich „can i use“ und überprüfte die Kompatibilität:

Verdammt, lass es uns einfach mit JS implementieren.

Wir alle wissen, dass window.scrollTo(x, y) die Funktion des Scrollens zu einer bestimmten Position auf der Seite durch Übergabe der x- und y-Achsenkoordinaten im Dokument realisiert. Tatsächlich kann diese API auch eine Option übergeben, bei der es sich um ein Objekt handelt. Der linke Wert entspricht dem x in den Koordinaten, der obere entspricht dem y in den Koordinaten und es gibt auch einen Verhaltenswert, der es Ihnen ermöglicht Um das Scrollverhalten anzupassen, implementieren wir das Scrollen wie folgt: Nach oben:

 window.scrollTo({ links: 0, oben: 0, Verhalten: 'smooth'})

Es riecht so gut, fertig. Ein paar Tage später kam der Produktmanager mit einem 5-Meter-Schwert zu mir und sagte, dass der Scroll-Effekt bei Safari seltsam sei und die körperliche Untersuchung äußerst schlecht ausgefallen sei. Also habe ich stillschweigend das MDN-Dokument geöffnet und nach unten gescrollt:

Wenn ich dieses Bild sehe, hängt die Option Option direkt in Safari, obwohl der API-Browser fast unterstützt wird. Daher habe ich Stackoverflow erneut geöffnet und die ultimative Lösung zusammengefasst.

Ich sehe oft den berühmten requestAnimationFrame, aber ich habe nie die Gelegenheit, ihn zu verwenden. Dieses Mal kann ich ihn ausprobieren. Wir wissen, dass die Funktion von requestAnimationFrame darin besteht, den Browser anzuweisen, die eingehende Rückruffunktion vor dem nächsten Neuzeichnen auszuführen. Dieses Verhalten wird vom Browser automatisch für Sie ausgeführt. Wir haben also den folgenden Code:

 const scrollToTop = () => { let scrollTop = document.documentElement.scrollTo ||. if (scrollTop > 0) { window.requestAnimationFrame(scrollTop) window.scrollTop(0, scrollTop - scrollTo / 8) }}

Erledigt! ! ! Perfekt! ! ! Während ich aufgeregt war, aktivierte ich „Can I Use to Check the Compatibility of requestAnimationFrame“:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.