overscroll-behavior-inline 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 overscroll-behavior-inline CSS-Eigenschaft legt fest, wie der Browser sich verhält, wenn der Inline-Richtungsrand eines Scrollbereichs erreicht wird.
Sehen Sie overscroll-behavior für eine vollständige Erklärung.
Syntax
/* Keyword values */
overscroll-behavior-inline: auto; /* default */
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;
/* Global values */
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;
Werte
Diese Eigenschaft wird mit einem der folgenden Schlüsselwortwerte spezifiziert:
auto-
Das standardmäßige Scroll-Overflow-Verhalten tritt wie gewohnt auf.
contain-
Das standardmäßige Scroll-Overflow-Verhalten (z.B. "Bounce"-Effekte) wird innerhalb des Elements beobachtet, in dem dieser Wert gesetzt ist. Es tritt jedoch kein scroll chaining in benachbarten Scrollbereichen auf; die darunterliegenden Elemente werden nicht scrollen. Der
contain-Wert deaktiviert die native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wischnavigation. none-
Es tritt kein Scroll-Chaining zu benachbarten Scrollbereichen auf und das standardmäßige Scroll-Overflow-Verhalten 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-inline =
contain |
none |
auto |
chain
Beispiele
Vermeidung von Overscrolling in Inline-Richtung
In diesem Beispiel haben wir zwei Block-Level-Boxen, eine innerhalb der anderen. Die äußere Box hat eine große width gesetzt, sodass die Seite horizontal scrollt. Die innere Box hat eine kleine Breite (und height) gesetzt, damit sie bequem im Ansichtsfenster sitzt, aber ihr Inhalt hat eine große Breite, sodass er ebenfalls horizontal scrollt.
Standardmäßig beginnt die gesamte Seite zu scrollen, wenn die innere Box gescrollt wird und eine Scrollgrenze erreicht wird, was wahrscheinlich nicht gewünscht ist. Um dies in der Inline-Richtung zu vermeiden, haben wir overscroll-behavior-inline: contain auf der inneren Box gesetzt.
HTML
<main>
<div>
<div>
<p>
<code>overscroll-behavior-inline</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: 400px;
width: 3000px;
background-color: white;
background-image: repeating-linear-gradient(
to right,
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-inline: contain;
}
div > div {
height: 100%;
width: 1500px;
background-color: yellow;
background-image: repeating-linear-gradient(
to right,
transparent 0px,
transparent 19px,
rgb(0 0 0 / 50%) 20px
);
}
p {
padding: 10px;
background-color: rgb(255 0 0 / 50%);
margin: 0;
width: 360px;
position: relative;
top: 10px;
left: 10px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |