overscroll-behavior-y CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die CSS-Eigenschaft overscroll-behavior-y legt fest, wie sich der Browser verhält, wenn die vertikale Grenze eines Scrollbereichs erreicht wird.
Eine ausführliche Erklärung finden Sie unter overscroll-behavior.
Syntax
/* Keyword values */
overscroll-behavior-y: auto; /* default */
overscroll-behavior-y: chain;
overscroll-behavior-y: contain;
overscroll-behavior-y: none;
/* Global values */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;
Werte
Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:
auto-
Erlaubt das Standardverhalten an einer Scrollgrenze. Das Scrollen kann in einem anderen Scrollcontainer fortgesetzt werden.
chain-
Erlaubt, das Scrollen außerhalb des Scrollcontainers fortzusetzen, verhindert aber Overscroll-„Bounce“-Effekte.
contain-
Verhindert, dass das Scrollen außerhalb des Scrollcontainers fortgesetzt wird. „Bounce“-Effekte können weiterhin auftreten.
none-
Verhindert, dass das Scrollen außerhalb des Scrollcontainers fortgesetzt wird, und unterbindet außerdem Overscroll-„Bounce“-Effekte.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | nicht ersetzte Blocklevel Elemente und nicht ersetzte Inlineblock Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
overscroll-behavior-y =
contain |
none |
auto |
chain
Beispiele
Verhindern, dass ein darunterliegendes Element scrollt
In unserem Beispiel zu overscroll-behavior (siehe auch den Quellcode) zeigen wir eine seitenfüllende Liste fiktiver Kontakte und ein Dialogfeld mit einem Chatfenster.
Beide Bereiche sind scrollbar. Wenn Sie normalerweise im Chatfenster bis zu einer Scrollgrenze scrollen, beginnt auch die darunterliegende Kontaktliste zu scrollen. Das ist nicht erwünscht. Sie können dies verhindern, indem Sie overscroll-behavior-y auf das Chatfenster anwenden (overscroll-behavior würde ebenfalls funktionieren):
.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}
Außerdem wollten wir die üblichen Overscroll-Effekte unterbinden, die auftreten, wenn die Kontaktliste bis ganz nach oben oder unten gescrollt wird (beispielsweise lädt Chrome unter Android die Seite neu, wenn Sie über die obere Grenze hinaus scrollen). Dies lässt sich verhindern, indem Sie overscroll-behavior-y: none für das <html>-Element festlegen:
html {
margin: 0;
overscroll-behavior-y: none;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |