Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden
|
Indem wir den aktuellen Bildlaufversatz zu den Attributen des HTML-Elements hinzufügen, können wir die Elemente auf der Seite basierend auf der aktuellen Bildlaufposition gestalten. Wir können dies verwenden, um eine Navigationskomponente zu erstellen, die oben auf der Seite schwebt. Dies ist das HTML, das wir verwenden werden. Die Komponente <header> ist diejenige, die beim Scrollen nach unten immer oben auf der Seite schweben soll. <header>Ich bin der Seitenkopf</header> <p>Hier gibt es jede Menge Inhalt...</p> <p>Weitere schöne Inhalte...</p> <p>Inhalt...</p> Zuerst warten wir auf das „Scroll“-Ereignis im Dokument und jedes Mal, wenn der Benutzer einen Bildlauf durchführt, erhalten wir den aktuellen ScrollY-Wert.
document.addEventListener('scroll', () => {
Dokument.documentElement.dataset.scroll = Fenster.scrollY;
});
Wir speichern die Scrollposition im Datenattribut des HTML-Elements. Wenn Sie sich das DOM mit den Entwicklertools ansehen, sieht es folgendermaßen aus: <html data-scroll="0">
/* Stellen Sie sicher, dass das Header-Tag immer höher als 3em ist */
Kopfzeile {
Mindesthöhe: 3em;
Breite: 100 %;
Hintergrundfarbe: #fff;
}
/* Dieselbe Höhe wie die Mindesthöhe der Kopfzeile oben auf der Seite beibehalten */
html:nicht([data-scroll='0']) body {
Polsterung oben: 3em;
}
/* Schalten Sie das Header-Tag in den festen Positionierungsmodus und fixieren Sie es oben auf der Seite*/
html:nicht([data-scroll='0']) header {
Position: fest;
oben: 0;
Z-Index: 1;
/* Die Box-Shadow-Eigenschaft kann den Schwebeeffekt verstärken*/
Kastenschatten: 0 0 .5em rgba(0, 0, 0, .5);
}
Das ist im Wesentlichen alles: Wenn der Benutzer nach unten scrollt, löst sich das Header-Tag automatisch von der Seite und schwebt über dem Inhalt. Der JavaScript-Code kümmert sich nicht darum, seine Aufgabe besteht darin, den Scroll-Offset in das Datenattribut einzufügen. Das ist perfekt, da keine enge Kopplung zwischen JavaScript und CSS besteht. Es gibt jedoch noch einige Bereiche, die verbessert werden können, vor allem im Hinblick auf die Leistung. Zuerst müssen wir das JavaScript-Skript ändern, um der Situation gerecht zu werden, dass die Bildlaufposition beim Laden der Seite nicht oben ist. In solchen Fällen wird das Header-Tag falsch gerendert. Wenn die Seite geladen wird, müssen wir schnell den aktuellen Scroll-Offset abrufen. Dadurch wird sichergestellt, dass wir immer mit dem aktuellen Status der Seite synchronisiert sind.
// Lesen Sie die Scrollposition der aktuellen Seite und speichern Sie sie in der Dateneigenschaft des Dokuments // damit wir sie in unserem Stylesheet verwenden können const storeScroll = () => {
Dokument.documentElement.dataset.scroll = Fenster.scrollY;
}
// Auf Scroll-Ereignisse warten document.addEventListener('scroll', storeScroll);
// Aktualisiere die Scrollposition, wenn die Seite zum ersten Mal geöffnet wird storeScroll();
Als Nächstes sehen wir uns einige Leistungsverbesserungen an. Wenn wir die ScrollY-Position erhalten möchten, muss der Browser die Position jedes Elements auf der Seite berechnen, um sicherzustellen, dass er die richtige Position zurückgibt. Es wäre am besten, wenn wir es nicht zwingen würden, bei jedem Scrollen einen Wert anzunehmen. Dazu benötigen wir eine Debounce-Methode, die unsere Abrufanfragen in die Warteschlange stellt, bis der Browser bereit ist, den nächsten Frame zu zeichnen. Zu diesem Zeitpunkt hat er bereits die Positionen aller Elemente auf der Seite berechnet, sodass er nicht immer wieder die gleiche Arbeit ausführen muss.
// Die Entprellfunktion akzeptiert eine benutzerdefinierte Funktion als Parameter const entprellen = (fn) => {
// Dies enthält einen Verweis auf requestAnimationFrame, sodass wir es jederzeit stoppen können, wenn wir let frame möchten.
// Die Entprellfunktion gibt eine neue Funktion zurück, die mehrere Parameter akzeptieren kann return (...params) => {
// Wenn der Wert von Frame vorhanden ist, lösche den entsprechenden Rückruf if (Frame) {
Animationsrahmen abbrechen(Rahmen);
}
// Lassen Sie unseren Rückruf ausführen, wenn der Browser das nächste Frame aktualisiert frame = requestAnimationFrame(() => {
// Führen Sie unsere benutzerdefinierte Funktion aus und übergeben Sie unsere Parameter fn(...params);
});
}
};
// Liest die Scrollposition aus und speichert sie im Datenattribut
// damit wir es in unseren Stylesheets verwenden können
const storeScroll = () => {
Dokument.documentElement.dataset.scroll = Fenster.scrollY;
}
// Auf neue Scroll-Ereignisse warten, hier entprellen wir unsere `storeScroll`-Funktion
document.addEventListener('scroll', entprellung(storeScroll));
// Scrollposition zum ersten Mal aktualisieren
speichernScrollen();Indem wir das Ereignis als passiv markieren, können wir dem Browser mitteilen, dass unser Scroll-Ereignis nicht durch Touch-Interaktionen blockiert wird (wie beispielsweise bei der Interaktion mit Plugins wie Google Maps). Dadurch kann der Browser die Seite sofort scrollen, da er nun weiß, dass das Ereignis nicht blockiert wird.
document.addEventListener('scroll', entprellung(storeScroll), { passiv: true });Nachdem das Leistungsproblem behoben wurde, können wir nun JavaScript stabil nutzen, um die abgerufenen Daten in CSS einzuspeisen und sie zum Stylen von Elementen auf der Seite zu verwenden. Live-Demo auf CodePen Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Verwenden Sie js, um js-Funktionen in Iframe-Seiten aufzurufen
>>: Analyse mehrerer Situationen, in denen der MySQL-Index fehlschlägt
Artikel empfehlen
Grafisches Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 8.0.22
Laden Sie MySQL 8.0.22 zu Ihrer Information herun...
Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue
Vorlage 1: anmelden.vue <Vorlage> <p Kla...
Detaillierte Erläuterung der Angular-Routing-Animation und der erweiterten Animationsfunktionen
Inhaltsverzeichnis 1. Routing-Animation 2. Gruppe...
Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)
Geschäftsszenario: Verwenden Sie den EL-Dialog vo...
ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse
Inhaltsverzeichnis 1. So führen Sie stapelweise U...
Detailliertes Beispiel für SpringBoot + nginx zum Erreichen der Ressourcen-Upload-Funktion
Vor Kurzem habe ich gelernt, mit Nginx statische ...
MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen
MySQL ist eine kostenlose relationale Datenbank m...
Detaillierte Erläuterung von 30 SQL-Abfrageoptimierungstechniken für MySQL-Zehnmillionen großer Datenmengen
1. Um die Abfrage zu optimieren, sollten Sie voll...
js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen
Inhaltsverzeichnis 1. Implementieren Sie die Meth...
Umfassende Zusammenfassung zu MySQL GTID
Inhaltsverzeichnis 01 Einführung in GTID 02 Wie G...
Grafisches Tutorial zur Installation der grünen Version von MySql 5.6.36 (64-Bit)
Es gibt im Internet viele Artikel zur MySQL-Insta...
Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse
Closure-Implementierung privater Variablen Privat...
Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10
Installation, Konfiguration, Start, Anmeldung und...
Installieren Sie Docker unter CentOS 7
Wenn Sie kein Linux-System haben, finden Sie unte...
Konstruktions- und Nutzungsprozess des Vue3.0-Projekts
Inhaltsverzeichnis 1. Projektkonstruktion 2: Verz...