Kurzfassung
Hier ist ein Geheimnis: Möglicherweise benötigen Sie in Ihrer nächsten App keine scroll-Ereignisse. Mit einem IntersectionObserver zeige ich, wie Sie ein benutzerdefiniertes Ereignis auslösen können, wenn position:sticky-Elemente fixiert werden oder sich nicht mehr anklicken lassen. Und das ganz ohne Scroll-Listener. Hier ist eine Demo, die das beweist:
Das Ereignis sticky-change
Eine der praktischen Einschränkungen der Verwendung der CSS-Sticky-Position ist, dass kein Plattformsignal dafür vorhanden ist, wann die Property aktiv ist. Mit anderen Worten: Es gibt kein Ereignis, das angibt, wann ein Element fixiert wird oder nicht mehr fixiert ist.
Im folgenden Beispiel wird ein <div class="sticky"> 10 Pixel über dem übergeordneten Container fixiert:
.sticky {
position: sticky;
top: 10px;
}
Wäre es nicht schön, wenn der Browser anzeigen würde, wann die Elemente diese Markierung erreichen?
Offenbar bin ich nicht die Einzige
das denkt. Ein Signal für position:sticky könnte eine Reihe von Anwendungsfällen freischalten:
- Wende einen Schlagschatten auf ein fixiertes Banner an.
- Erfassen Sie Analytics-Treffer, während ein Nutzer Ihre Inhalte liest, Fortschritt.
- Wenn ein Nutzer auf der Seite scrollt, aktualisieren Sie ein Floating-TOC-Widget auf die aktuelle .
Mit diesen Anwendungsfällen im Hinterkopf haben wir ein Endziel formuliert: ein Ereignis erstellen, das ausgelöst wird, wenn ein position:sticky-Element fixiert wird. Nennen wir sie die
sticky-change-Ereignis:
document.addEventListener('sticky-change', e => {
const header = e.detail.target; // header became sticky or stopped sticking.
const sticking = e.detail.stuck; // true when header is sticky.
header.classList.toggle('shadow', sticking); // add drop shadow when sticking.
document.querySelector('.who-is-sticking').textContent = header.textContent;
});
Die Demo verwendet diesem Ereignis einen Schlagschatten hinzu, wenn die Probleme behoben werden. Außerdem wird der neue Titel oben auf der Seite aktualisiert.
Scrolleffekte ohne Scroll-Ereignisse?
Lassen Sie uns einige Terminologie aus dem Weg räumen, damit ich mich auf diese Namen beziehen kann. im weiteren Verlauf dieses Beitrags:
- Scrollcontainer: der Inhaltsbereich (sichtbarer Darstellungsbereich), der die Liste der „Blogposts“.
- Überschriften: blaue Titel in jedem Abschnitt, in denen
position:stickyenthalten ist - Fixierte Bereiche: Jeder Inhaltsbereich. Der Text, der unter den fixierten Überschriften scrollt.
- Fixierter Modus: Wenn
position:stickyauf das Element angewendet wird.
Damit wir wissen, welcher Header in den „Sticky-Modus“ wechselt, müssen wir den Scroll-Offset des Scroll-Containers ermitteln. So könnten wir den aktuell angezeigten Header berechnen. Das wird jedoch ziemlich
scroll-Ereignisse zu vermeiden. Das andere Problem ist,
position:sticky entfernt das Element aus dem Layout, sobald es fixiert ist.
Ohne Scroll-Ereignisse können Layout-bezogene Berechnungen in den Überschriften.
Dummy-DOM hinzufügen, um die Scrollposition zu bestimmen
Anstatt scroll-Ereignisse verwenden wir ein IntersectionObserver, um zu ermitteln, wann Überschriften den angepinnten Modus betreten und verlassen. Zwei Knoten hinzufügen
(Sentinels) in jedem fixierten Abschnitt, einen oben und einen
unten dienen als Wegpunkte für die Ermittlung der Scrollposition. Da diese
Markierungen in den Container eintreten oder ihn verlassen, ändert sich ihre Sichtbarkeit
Intersection Observer löst einen Callback aus.
Wir benötigen zwei Sentinels, um vier Fälle des Hoch- und Herunterscrollens abzudecken:
- Nach unten scrollen: Der Header wird fixiert, wenn sich der obere Sentinel kreuzt. am oberen Rand des Containers.
- Scrollen nach unten – header verlässt den fixierten Modus, wenn er das Ende des der Abschnitt und die untere Sentinel überqueren den oberen Bereich des Containers.
- Nach oben scrollen: Der Header verlässt den fixierten Modus, wenn sein oberes Sentinel von oben wieder in den Blick kommt.
- Nach oben scrollen – Der Header wird fixiert, wenn der untere Sentinel nach hinten bewegt wird. von oben sichtbar.
Es ist hilfreich, sich einen Screencast von 1 bis 4 in der Reihenfolge anzusehen, in der sie auftreten:
Das Preisvergleichsportal
Die Sentinels werden oben und unten in jedem Abschnitt platziert.
.sticky_sentinel--top befindet sich oben im Header, während
.sticky_sentinel--bottom befindet sich am Ende des Abschnitts:
:root {
--default-padding: 16px;
--header-height: 80px;
}
.sticky {
position: sticky;
top: 10px; /* adjust sentinel height/positioning based on this position. */
height: var(--header-height);
padding: 0 var(--default-padding);
}
.sticky_sentinel {
position: absolute;
left: 0;
right: 0; /* needs dimensions */
visibility: hidden;
}
.sticky_sentinel--top {
/* Adjust the height and top values based on your on your sticky top position.
e.g. make the height bigger and adjust the top so observeHeaders()'s
IntersectionObserver fires as soon as the bottom of the sentinel crosses the
top of the intersection container. */
height: 40px;
top: -24px;
}
.sticky_sentinel--bottom {
/* Height should match the top of the header when it's at the bottom of the
intersection container. */
height: calc(var(--header-height) + var(--default-padding));
bottom: 0;
}
Beobachten der Kreuzung einrichten
Intersection Observer überwachen asynchron Änderungen an der Schnittmenge eines Zielelements und des Dokument-Viewports oder eines übergeordneten Containers. In unserem Fall sehen wir Schnittpunkte mit einem übergeordneten Container.
Das Geheimnis ist IntersectionObserver. Jeder Sentinel erhält eine IntersectionObserver, um die Sichtbarkeit der Überschneidung im Scrollcontainer zu beobachten. Wenn ein Sentinel in den sichtbaren Darstellungsbereich scrollt, wissen wir, dass eine Überschrift fixiert wurde oder nicht mehr fixiert ist. Das Gleiche gilt, wenn ein Sentinel den Darstellungsbereich verlässt.
Zuerst richte ich Beobachter für die Header- und Fußzeilen-Sentinels ein:
/**
* Notifies when elements w/ the `sticky` class begin to stick or stop sticking.
* Note: the elements should be children of `container`.
* @param {!Element} container
*/
function observeStickyHeaderChanges(container) {
observeHeaders(container);
observeFooters(container);
}
observeStickyHeaderChanges(document.querySelector('#scroll-container'));
Dann habe ich einen Beobachter hinzugefügt, der ausgelöst wird, wenn .sticky_sentinel--top-Elemente den oberen Rand des Scrollcontainers in beide Richtungen passieren.
Mit der Funktion observeHeaders werden die wichtigsten Sentinels erstellt und den
für jeden Abschnitt. Der Beobachter berechnet die Schnittmenge des Sentinels mit dem oberen Rand des Containers und entscheidet, ob er den Viewport betritt oder verlässt. Anhand dieser Informationen wird festgelegt, ob der Abschnittsheader fixiert ist oder nicht.
/**
* Sets up an intersection observer to notify when elements with the class
* `.sticky_sentinel--top` become visible/invisible at the top of the container.
* @param {!Element} container
*/
function observeHeaders(container) {
const observer = new IntersectionObserver((records, observer) => {
for (const record of records) {
const targetInfo = record.boundingClientRect;
const stickyTarget = record.target.parentElement.querySelector('.sticky');
const rootBoundsInfo = record.rootBounds;
// Started sticking.
if (targetInfo.bottom < rootBoundsInfo.top) {
fireEvent(true, stickyTarget);
}
// Stopped sticking.
if (targetInfo.bottom >= rootBoundsInfo.top &&
targetInfo.bottom < rootBoundsInfo.bottom) {
fireEvent(false, stickyTarget);
}
}
}, {threshold: [0], root: container});
// Add the top sentinels to each section and attach an observer.
const sentinels = addSentinels(container, 'sticky_sentinel--top');
sentinels.forEach(el => observer.observe(el));
}
Der Beobachter ist mit threshold: [0] konfiguriert, sodass sein Callback ausgelöst wird, sobald
wenn die Sentinel sichtbar wird.
Der Vorgang ist für den unteren Sentinel (.sticky_sentinel--bottom) ähnlich.
Ein zweiter Beobachter wird erstellt, der ausgelöst wird, wenn die Fußzeilen den unteren Rand passieren
des scrollbaren Containers. Die Funktion observeFooters erstellt die Sentinel-Knoten und fügt sie den einzelnen Abschnitten hinzu. Der Beobachter berechnet die
zwischen der Sentinel und der Unterseite des Containers und entscheidet,
eintreten oder verlassen. Anhand dieser Informationen wird bestimmt,
ob Sie nicht stecken oder nicht.
/**
* Sets up an intersection observer to notify when elements with the class
* `.sticky_sentinel--bottom` become visible/invisible at the bottom of the
* container.
* @param {!Element} container
*/
function observeFooters(container) {
const observer = new IntersectionObserver((records, observer) => {
for (const record of records) {
const targetInfo = record.boundingClientRect;
const stickyTarget = record.target.parentElement.querySelector('.sticky');
const rootBoundsInfo = record.rootBounds;
const ratio = record.intersectionRatio;
// Started sticking.
if (targetInfo.bottom > rootBoundsInfo.top && ratio === 1) {
fireEvent(true, stickyTarget);
}
// Stopped sticking.
if (targetInfo.top < rootBoundsInfo.top &&
targetInfo.bottom < rootBoundsInfo.bottom) {
fireEvent(false, stickyTarget);
}
}
}, {threshold: [1], root: container});
// Add the bottom sentinels to each section and attach an observer.
const sentinels = addSentinels(container, 'sticky_sentinel--bottom');
sentinels.forEach(el => observer.observe(el));
}
Der Beobachter ist mit threshold: [1] konfiguriert, sodass sein Callback ausgelöst wird, wenn der
der gesamte Knoten sichtbar ist.
Zum Schluss gibt es noch zwei Tools zum Auslösen des benutzerdefinierten Ereignisses sticky-change und zum Generieren der Prüfzeichen:
/**
* @param {!Element} container
* @param {string} className
*/
function addSentinels(container, className) {
return Array.from(container.querySelectorAll('.sticky')).map(el => {
const sentinel = document.createElement('div');
sentinel.classList.add('sticky_sentinel', className);
return el.parentElement.appendChild(sentinel);
});
}
/**
* Dispatches the `sticky-event` custom event on the target element.
* @param {boolean} stuck True if `target` is sticky.
* @param {!Element} target Element to fire the event on.
*/
function fireEvent(stuck, target) {
const e = new CustomEvent('sticky-change', {detail: {stuck, target}});
document.dispatchEvent(e);
}
Fertig!
Endgültige Demo
Wir haben ein benutzerdefiniertes Ereignis erstellt, wenn Elemente mit position:sticky fixiert werden, und Scrolleffekte ohne scroll-Ereignisse hinzugefügt.
Fazit
Ich habe mich oft gefragt, ob IntersectionObserver ein hilfreiches Tool wäre, um einige der scroll ereignisbasierten UI-Muster zu ersetzen, die sich im Laufe der Jahre entwickelt haben. Wie sich herausstellt, lautet die Antwort ja und nein. Die Semantik
der IntersectionObserver API die Nutzung für alles erschweren. Aber als
Ich habe Ihnen gezeigt, wie Sie damit
ein paar interessante Techniken erlernen können.
Eine andere Möglichkeit, Stiländerungen zu erkennen?
Nicht wirklich. Wir brauchten eine Möglichkeit, Stiländerungen an einem DOM-Element zu beobachten. Leider gibt es in den Webplattform-APIs nichts, was es Ihnen ermöglicht, Stiländerungen der Smartwatch.
Ein MutationObserver wäre eine logische erste Wahl, aber das funktioniert nicht für
in den meisten Fällen. In der Demo erhalten wir beispielsweise einen Rückruf, wenn einem Element die Klasse sticky hinzugefügt wird, aber nicht, wenn sich der berechnete Stil des Elements ändert.
Denken Sie daran, dass die Klasse sticky bereits beim Seitenaufbau deklariert wurde.
In Zukunft wird ein
Style Mutation Observer
Erweiterung auf Mutation Observers kann nützlich sein, um Änderungen an einem
berechneten Stilen des Elements.
position: sticky.