overscroll-behavior

Die CSS-Eigenschaft overscroll-behavior steuert, ob ein Element „Scroll Chaining“ verwendet oder nicht. Sie haben dieses Verhalten wahrscheinlich schon erlebt und es vielleicht als selbstverständlich hingenommen, dass das Scrollen im Web so funktioniert! Wenn Sie sich innerhalb eines Elements befinden, das sein eigenes Scrolling hat (sagen wir vertikal), und Sie bis zum Ende davon nach unten gescrollt haben, dann beginnt standardmäßig das nächste übergeordnete Element (vielleicht die Seite selbst) in dieser Richtung zu scrollen. Wenn Sie das nicht möchten, steuert overscroll-behavior dies.

Mit anderen Worten, es gibt an, wie sich der Browser verhält, wenn die Grenze eines Scrollbereichs erreicht wird.

.stop-scroll-chaining {
  overscroll-behavior: contain; /* or "none" */
}

overscroll-behavior ist eine Kurzform für overscroll-behavior-x und overscroll-behavior-y und ist in der CSS Overscroll Behavior Module Level 1 Specification definiert, die sich derzeit im Entwurfsstatus befindet.

Scroll Chaining und Overscroll-Affordances

Scroll Chaining ist, wenn das Scrollen von einem Scroll-Container an einen übergeordneten Scroll-Container weitergegeben wird. Diesen Effekt können Sie im folgenden Video sehen.

Wie Sie sehen können, beginnt der dahinterliegende Container zu scrollen, sobald die Scroll-Grenze der Listenbox erreicht ist, und dann folgt auch die darunterliegende Seite der Scroll-Kette.

Overscroll-Affordance sind Dinge wie der Overscroll-Glüheffekt auf Android oder der Gummiband-Effekt auf iOS, die beide als visuelle Anzeige dienen, dass der Benutzer eine Scroll-Grenze erreicht hat. Sie können auch andere Implementierungen sehen, wie z. B. einen „Bounce“-Effekt auf mobilen Browsern oder eine Seitenaktualisierung, wenn das obere oder untere Ende einer Seite erreicht wird.

Syntax

overscroll-behavior: [ contain | none | auto ]{1,2}

• Anfangswert: auto
• Gilt für: Nicht ersetzte Block-Level-Elemente und nicht ersetzte Inline-Block-Elemente
• Vererbt: nein
• Prozentwerte: n/v
• Berechneter Wert: die einzelnen Eigenschaften des Shorthands
• Animationstyp: diskret

Werte

/* Keyword values */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;

/* Two values */
overscroll-behavior: none auto;
overscroll-behavior: auto contain;

/* Global values */
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: revert;
overscroll-behavior: unset;

• auto: Der Standardwert. Gibt an, dass der Browser die Standard-Grenzwertaktion ausführen soll und ermöglicht es dem Benutzer, durch einen übergeordneten Scroll-Bereich zu scrollen, wenn die Grenze des primären Scroll-Bereichs erreicht wurde. Mit anderen Worten, es ermöglicht Scroll Chaining und Overscroll-Affordances.
• contain: Verhindert Scroll Chaining. Scrollvorgänge werden nicht an übergeordnete Elemente (die anderen Elemente in einem übergeordneten Container) weitergegeben, behalten aber Overscroll-Affordances wie „Bounce“-Effekte bei, wenn über das Ende des Containers hinaus gescrollt wird, in Betriebssystemen, die dies unterstützen.
• none: Verhindert Scroll Chaining und auch Overscroll-Affordances. Sie erhalten also nicht den Android-Overscroll-Glanz oder den iOS-Gummiband-Effekt.
• initial: Wendet die Standardeinstellung der Eigenschaft an, die auto ist.
• inherit: Übernimmt den Wert overscroll-behavior des übergeordneten Elements.
• unset: Entfernt die aktuelle overscroll-behavior-Eigenschaft vom Element.

Bestandteileigenschaften

Wir haben es bereits erwähnt, aber overscroll-behavior ist eine Kurzform für zwei weitere CSS-Eigenschaften, die als „Bestandteile“ der Kurzform bezeichnet werden. Schauen wir uns diese einzeln an.

overscroll-behavior-x

Wie der Name schon sagt, erlaubt die CSS-Eigenschaft overscroll-behavior-x, das Verhalten des Browsers zu steuern, wenn die horizontale Grenze eines Scrollbereichs erreicht wird. Während wir also das horizontale und vertikale Overscroll-Verhalten mit overscroll-behavior allein steuern können, steuert overscroll-behavior-x nur das Verhalten in linker und rechter Richtung.

Im folgenden Demo können Sie das unterschiedliche Verhalten des Browsers sehen, wenn der Wert von overscroll-behavior-x auf contain gesetzt ist.

Sehen Sie das? Wenn das contain-Overscroll-Verhalten deaktiviert ist, beginnt sich die gesamte Seite zu scrollen, sobald Sie die horizontale (links und rechts) Scroll-Grenze erreichen.

overscroll-behavior-y

Die CSS-Eigenschaft overscroll-behavior-y ist wie overscroll-behavior-x, aber sie steuert das Verhalten des Browsers, wenn die vertikale Grenze eines Scrollbereichs erreicht wird. Wir sprechen hier also von der Ober- und Unterseite.

.modal {
  overscroll-behavior-y: contain;
}

overscroll-behavior-inline

Die CSS-Eigenschaft overscroll-behavior-inline erlaubt es Ihnen, das Verhalten des Browsers zu steuern, wenn die Inline-Richtungs-Grenze eines Scrollbereichs erreicht wird.

overscroll-behavior-inline ist eine CSS-logische Eigenschaft, die der overscroll-behavior-x-Eigenschaft eines Elements entspricht, wenn der writing-mode horizontal ist, oder der overscroll-behavior-y-Eigenschaft des Elements, wenn der writing-mode vertikal ist.

overscroll-behavior-block

Die CSS-Eigenschaft overscroll-behavior-block erlaubt es Ihnen, das Verhalten des Browsers zu steuern, wenn die Block-Richtungs-Grenze eines Scrollbereichs erreicht wird.

overscroll-behavior-block ist eine CSS-logische Eigenschaft, die der overscroll-behavior-y-Eigenschaft eines Elements entspricht, wenn der writing-mode horizontal ist, oder der overscroll-behavior-x-Eigenschaft des Elements, wenn der writing-mode vertikal ist.

.element {
  overscroll-behavior-block: none;
}

Verwendung

Wollen Sie ein paar Beispiele für overscroll-behavior in Aktion sehen? Natürlich wollen Sie das!

Deaktivieren der Pull-to-Refresh-Funktion

Nachdem der Pull-to-Refresh-Effekt sehr beliebt wurde, haben auch mobile Browser, einschließlich Chrome auf Android, ihn implementiert. Durch Wischen nach unten am oberen Rand der Seite wird die gesamte Seite aktualisiert.

So nützlich diese Geste auch ist, manchmal möchten Sie Ihren eigenen Pull-to-Refresh-Effekt erstellen und die native Overscroll-Aktion des Browsers deaktivieren. Dies können wir erreichen, indem wir das Scroll Chaining auf <html> oder <body> verhindern.

html {
  overscroll-behavior-y: contain;
}

Dies verhindert auch Overscroll-Navigationsaktionen.

Deaktivieren von Overscroll-Glühen und Gummiband-Effekten

Das Festlegen des Wertes contain entfernt diese Effekte nicht. Damit dies funktioniert, müssen wir den Wert none verwenden, der auch die Pull-to-Refresh- und Overscroll-Navigationsaktionen deaktiviert.

html {
  overscroll-behavior-y: none;
}

Möglicherweise möchten Sie dies auch mit unendlichem Scrollen verwenden. Es kann verwirrend sein, wenn ein Benutzer das Ende der Seite erreicht, einen Gummiband-Effekt erhält und dann weiterer Inhalt geladen wird.

Verhindern, dass Seiteninhalte unter einem Modal oder einer festen Seitenleiste scrollen

Betrachten Sie eine Seitenleiste mit einer großen Anzahl von Elementen – so viele, dass die Höhe der Navigation die Seitenhöhe überschreitet und der Benutzer nach unten scrollen muss, um alle Menüelemente zu sehen.

Der Overflow-Container stoppt das Scrollen, wenn er das Ende erreicht, aber wenn der Benutzer weiter scrollt, beginnt der restliche Inhalt außerhalb des Navigationscontainers ebenfalls zu scrollen.

Die Verwendung des Schlüsselworts contain verhindert dies.

Wir können den gleichen Ansatz für Modals verwenden.

Browser-Unterstützung

Weitere Informationen

• CSS Overscroll Behavior Module Level 1