overscroll-behavior-block CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2022 browserübergreifend verfügbar.
Die overscroll-behavior-block CSS Eigenschaft legt das Verhalten des Browsers fest, wenn die Blockrichtungsgrenze eines Scrollbereichs erreicht wird.
Sehen Sie overscroll-behavior für eine vollständige Erläuterung.
Syntax
/* Keyword values */
overscroll-behavior-block: auto; /* default */
overscroll-behavior-block: contain;
overscroll-behavior-block: none;
/* Global values */
overscroll-behavior-block: inherit;
overscroll-behavior-block: initial;
overscroll-behavior-block: revert;
overscroll-behavior-block: revert-layer;
overscroll-behavior-block: unset;
Die Eigenschaft overscroll-behavior-block wird als ein Schlüsselwort aus der untenstehenden Liste von Werten angegeben.
Werte
auto-
Das Standardverhalten des Scroll-Overflows tritt normal auf.
contain-
Das Standardverhalten des Scroll-Overflows (z. B. "Bounce"-Effekte) wird innerhalb des Elements beobachtet, in dem dieser Wert festgelegt ist. Es tritt jedoch kein Scroll Chaining bei benachbarten Scrollbereichen auf; die darunterliegenden Elemente scrollen nicht. Der Wert
containdeaktiviert die native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wisch-Navigation. none-
Es tritt kein Scroll Chaining zu benachbarten Scrollbereichen auf, und das Standardverhalten des Scroll-Overflows wird verhindert.
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-block =
contain |
none |
auto
Beispiele
Verhindern von Block-Überscrollen
In diesem Demo haben wir zwei Block-Level-Boxen, eine innerhalb der anderen. Die äußere Box hat eine große height darauf gesetzt, sodass die Seite vertikal scrollen wird. Die innere Box hat eine kleine width (und height) so gesetzt, dass sie bequem im Anzeigebereich sitzt, aber ihrem Inhalt ist eine große height zugewiesen, sodass er ebenfalls vertikal scrollen wird.
Standardmäßig, wenn die innere Box gescrollt wird und eine Scroll-Grenze erreicht ist, beginnt die ganze Seite zu scrollen, was wahrscheinlich nicht gewünscht ist. Um dies in der Blockrichtung zu vermeiden, haben wir overscroll-behavior-block: contain auf die innere Box gesetzt.
HTML
<main>
<div>
<div>
<p>
<code>overscroll-behavior-block</code> has been used to make it so that
when the scroll boundaries of the yellow inner box are reached, the
whole page does not begin to scroll.
</p>
</div>
</div>
</main>
CSS
main {
height: 3000px;
width: 500px;
background-color: white;
background-image: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 19px,
rgb(0 0 0 / 50%) 20px
);
}
main > div {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-block: contain;
}
div > div {
height: 1500px;
width: 100%;
background-color: yellow;
background-image: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 19px,
rgb(0 0 0 / 50%) 20px
);
}
p {
padding: 10px;
background-color: rgb(255 0 0 / 50%);
margin: 0;
width: 340px;
position: relative;
top: 10px;
left: 10px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |