Heim > Artikel > Web-Frontend > CSS-Implementierung basierend auf einer Benutzer-Scrolling-Anwendung (Code)
CSS-Implementierung basierend auf einer Benutzer-Scrolling-Anwendung (Code)
- 不言nach vorne
- 2019-03-30 11:38:551837Durchsuche
Der Inhalt dieses Artikels befasst sich mit der CSS-Implementierung benutzerbasierter Scroll-Anwendungen (Code). Ich hoffe, dass er für Freunde hilfreich ist.
Indem wir den aktuellen Scroll-Offset einer Eigenschaft eines HTML-Elements zuordnen, können wir Elemente auf der Seite basierend auf der aktuellen Scroll-Position formatieren. Damit können wir eine schwebende Navigationskomponente erstellen.
Dies ist der HTML-Code, den wir verwenden werden, der
<header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p>
Zuerst hören wir uns das Ereignis „scroll“, document und scrollY an und fragen jedes Mal, wenn der Benutzer scrollt, die aktuelle Position ab.
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});
Wir speichern die Scroll-Position im Datenattribut des HTML-Elements. Wenn Sie die Entwicklungstools verwenden, um das DOM anzuzeigen, sieht es so aus.
<html data-scroll="0">
Jetzt können wir dieses Attribut verwenden, um Elemente auf der Seite zu formatieren.
/* Make sure the header is always at least 3em high */
header {
min-height: 3em;
width: 100%;
background-color: #fff;
}
/* Reserve the same height at the top of the page as the header min-height */
html:not([data-scroll='0']) body {
padding-top: 3em;
}
/* Switch to fixed positioning, and stick the header to the top of the page */
html:not([data-scroll='0']) header {
position: fixed;
top: 0;
z-index: 1;
/* This box-shadow will help sell the floating effect */
box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}
Im Grunde genommen löst sich der Titel beim Herunterscrollen nun automatisch von der Seite und schwebt über dem Inhalt. Dem JavaScript-Code ist das egal, seine Aufgabe besteht darin, den Scroll-Offset in das Datenattribut einzufügen. Das ist gut, da es keine enge Kopplung zwischen JavaScript und CSS gibt.
Es gibt noch einige Verbesserungen, vor allem im Leistungsbereich.
Aber zuerst müssen wir das Skript korrigieren, um zu berücksichtigen, dass die Scroll-Position beim Laden der Seite nicht oben ist. In diesen Fällen wird der Titel falsch wiedergegeben.
Wenn die Seite geladen wird, müssen wir schnell den aktuellen Scroll-Offset ermitteln. Dadurch stellen wir sicher, dass wir stets auf dem aktuellen Stand sind.
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll events
document.addEventListener('scroll', storeScroll);
// Update scroll position for first time
storeScroll();
Als nächstes schauen wir uns einige Leistungsverbesserungen an. Wenn wir diese scrollY-Position anfordern, muss der Browser die Position jedes Elements auf der Seite berechnen, um sicherzustellen, dass die richtige Position zurückgegeben wird. Am besten wäre es, wenn wir dies nicht bei jeder Scroll-Interaktion erzwingen würden.
Dazu benötigen wir eine Entprellungsmethode, die unsere Anfrage in die Warteschlange stellt, bis der Browser bereit ist, den nächsten Frame zu zeichnen. Zu diesem Zeitpunkt hat er die Positionen aller Elemente auf der Seite berechnet und hat also gewonnen Das passiert nicht noch einmal.
// The debounce function receives our function as a parameter
const debounce = (fn) => {
// This holds the requestAnimationFrame reference, so we can cancel it if we wish
let frame;
// The debounce function returns a new function that can receive a variable number of arguments
return (...params) => {
// If the frame variable has been defined, clear it now, and queue for next frame
if (frame) {
cancelAnimationFrame(frame);
}
// Queue our function call for the next frame
frame = requestAnimationFrame(() => {
// Call our function and pass any params we received
fn(...params);
});
}
};
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));
// Update scroll position for first time
storeScroll();
Indem wir das Ereignis als passiv markieren, können wir dem Browser mitteilen, dass unsere Scroll-Ereignisse nicht durch Berührungsinteraktionen abgebrochen werden (z. B. bei der Interaktion mit Plugins wie Google Maps). Dadurch kann der Browser sofort durch die Seite scrollen, da er nun weiß, dass die Veranstaltung nicht abgesagt wird.
document.addEventListener('scroll', debounce(storeScroll), { passive: true });
Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte CSS-Video-Tutorial auf der chinesischen PHP-Website!
Das obige ist der detaillierte Inhalt vonCSS-Implementierung basierend auf einer Benutzer-Scrolling-Anwendung (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!