Kurzfassung
Mit der Eigenschaft CSS overscroll-behavior
können Entwickler die
Standard-Scrollverhalten des Browsers beim Erreichen des oberen oder unteren
Inhalte. Anwendungsfälle umfassen das Deaktivieren der Funktion zum Aktualisieren
zum Entfernen des Overscroll-Effekts und der
und verhindern, dass der Seiteninhalt scrollt, wenn er sich unter einem modalen/Overlay befindet.
Hintergrund
Scrollgrenzen und Scroll-Verkettung
<ph type="x-smartling-placeholder">Scrollen ist eine der grundlegendsten Möglichkeiten, mit einer Seite zu interagieren. können bestimmte UX-Muster schwer zu handhaben sein, da der Browser Standardverhalten. Nehmen wir als Beispiel eine App-Leiste mit einer großen Anzahl von Elemente, durch die die Nutzenden scrollen müssen. Ganz unten sehen Sie, Der Überlaufcontainer stoppt das Scrollen, da kein weiterer Inhalt vorhanden ist. Mit anderen Worten: Die Nutzenden eine Scroll-Grenze erreicht. Beachten Sie jedoch, was passiert, wenn die Nutzenden Scrollen. Der Inhalt hinter der Leiste beginnt zu scrollen. Scrollen ist vom übergeordneten Container übernommen wird. die Hauptseite selbst.
Dieses Verhalten wird als Scrollverkettung bezeichnet. Standardeinstellung des Browsers beim Scrollen von Inhalten. Oft ist die Standardeinstellung schön, manchmal unerwünscht oder sogar unerwartet. Bestimmte Apps eine andere User Experience bieten, wenn der Nutzer eine Scroll-Grenze erreicht.
Der Effekt „Zum Aktualisieren ziehen“
„Zum Aktualisieren ziehen“ ist eine intuitive Geste, die von mobilen Apps wie dem Facebook und Twitter Durch das Aufrufen eines sozialen Feeds und die Veröffentlichung Platz zum Laden neuerer Beiträge. Diese spezielle UX hat sind so beliebt, dass mobile Browser wie Chrome für Android inzwischen denselben Effekt haben. Wenn Sie oben auf der Seite nach unten wischen, wird die gesamte Seite aktualisiert:
Für Situationen wie die PWA von Twitter:
ist es sinnvoll, die native Aktion zum
Aktualisieren nach unten zu deaktivieren. Warum? In dieser
App möchten Sie wahrscheinlich nicht, dass der Nutzer versehentlich die Seite aktualisiert. Es gibt
und die Möglichkeit, eine doppelte Aktualisierungsanimation zu sehen! Alternativ kann es
die Aktionen des Browsers besser an die Funktion der Website
Branding. Leider wurde diese Art der Anpassung
ist das nicht immer einfach. Entwickler schreiben unnötiges JavaScript, fügen
nicht passiv
Touch-Listener (die das Scrollen blockieren) oder die gesamte Seite in einer
<div>
, damit die Seite nicht überläuft. Diese Behelfslösungen
gut dokumentierte negative
auf die Scrollleistung.
Das können wir besser!
Jetzt neu: overscroll-behavior
Die Eigenschaft overscroll-behavior
ist eine neue CSS-Funktion, die steuert,
was passiert, wenn Sie über einen Container scrollen (einschließlich der
Seite selbst). Sie können damit die Scroll-Verkettung abbrechen,
Zum Aktualisieren ziehen, unter iOS die Gummibandeffekten deaktivieren (wenn Safari
implementiert overscroll-behavior
) und mehr.
Das Beste daran ist, dass die Verwendung von overscroll-behavior
sich nicht negativ auf
Für das Attribut sind drei mögliche Werte möglich:
- auto: Die Standardeinstellung. Scrollvorgänge, die von dem Element stammen, Ancestor-Elemente.
- contain: Verhindert die Scroll-Verkettung. Scrolls werden nicht an Ancestors weitergegeben
aber lokale Effekte innerhalb des Knotens werden angezeigt. Das Overscroll-Leuchtsymbol
oder den Gummibanding-Effekt unter iOS, wodurch der Nutzer
wenn sie eine Scroll-Grenze erreicht haben. Hinweis: Verwenden Sie
overscroll-behavior: contain
für das Elementhtml
verhindert Overscroll Navigationsaktionen verwenden. - none: Entspricht
contain
, verhindert aber auch Overscroll-Effekte innerhalb Knoten selbst (z. B. Android-Overscroll-Leuchten oder iOS-Gummibanding)
Sehen wir uns ein paar Beispiele für die Verwendung von overscroll-behavior
an.
Verhindern, dass Scrollvorgänge in einem Element mit fester Position umgangen werden
Das Chatbox-Szenario
<ph type="x-smartling-placeholder">Nehmen wir ein fest positioniertes Chatfeld unten auf der Seite. Die ist, dass das Chatfeld eine eigenständige Komponente ist und scrollt. getrennt vom Content dahinter. Aufgrund der Scroll-Verkettung kann der Das Dokument wird gescrollt, sobald der Nutzer auf die letzte Nachricht im Chat stößt. .
Für diese App ist es sinnvoller, Scrolls zu verwenden, die aus dem
bleibt im Chat. Um dies zu erreichen, fügen wir
overscroll-behavior: contain
für das Element, das die Chatnachrichten enthält:
#chat .msgs {
overflow: auto;
overscroll-behavior: contain;
height: 300px;
}
Im Wesentlichen schaffen wir eine logische Trennung zwischen dem Scrollen des Chatfelds Kontext und die Hauptseite. Das Endergebnis ist, dass die Hauptseite angezeigt wird, Der Nutzer erreicht den Anfang/das Ende des Chatprotokolls. Scrollvorgänge, die in der Chatbox nicht propagiert.
Das Seiten-Overlay-Szenario
Eine weitere Variante des sogenannten wenn Sie Inhalte sehen,
Scrollen hinter einem Overlay mit fester Position. Das Werbegeschenk ist tot
overscroll-behavior
ist in Ordnung! Der Browser ist zwar hilfreich,
führt dies dazu, dass die Website fehlerhaft wirkt.
Beispiel – modales Fenster mit und ohne overscroll-behavior: contain
:
"Zum Aktualisieren ziehen" deaktivieren
Zum Deaktivieren der Aktion „Zum Aktualisieren ziehen“ wird eine einzelne CSS-Zeile benötigt. Nur verhindern
Scroll-Verkettung für das gesamte Element, das den Darstellungsbereich definiert. In den meisten Fällen
<html>
oder <body>
:
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
Durch diese einfache Ergänzung beheben wir die doppelten Zieh-zum-Aktualisieren-Animationen Chatbox-Demo ansehen und Implementieren Sie stattdessen einen benutzerdefinierten Effekt, der eine übersichtlichere Ladeanimation verwendet. Die bei einer Aktualisierung des Posteingangs wird auch der gesamte Posteingang unkenntlich gemacht:
Hier ist ein Ausschnitt des vollständiger Code:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Overscroll-Leuchten und Gummibanding-Effekte deaktivieren
Um den Sprungeffekt beim Erreichen einer Scroll-Grenze zu deaktivieren, verwende
overscroll-behavior-y: none
:
body {
/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
overscroll-behavior-y: none;
}
Vollständige Demo
Wenn wir alles zusammenfügen,
Chatbox-Demo verwendet
overscroll-behavior
, um eine benutzerdefinierte Animation zum Aktualisieren durch Ziehen zu erstellen
und verhindern, dass durch Scrollen
das Escape-Format für das Chatbox-Widget angezeigt wird. Dies sorgt für eine optimale
Nutzererfahrung, die ohne CSS nur schwer zu erreichen wäre
overscroll-behavior