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.
Die overscroll-behavior-inline-Eigenschaft von CSS legt das Verhalten des Browsers fest, wenn die Begrenzung einer Scrollfläche in Inline-Richtung erreicht wird.
Siehe 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;
Die Eigenschaft overscroll-behavior-inline wird als ein Schlüsselwort aus der untenstehenden Liste von Werten angegeben.
Werte
auto-
Das standardmäßige Verhalten bei Scroll-Überlauf erfolgt wie gewohnt.
contain-
Das standardmäßige Verhalten bei Scroll-Überlauf (z. B. "Bounce"-Effekte) wird innerhalb des Elements, bei dem dieser Wert festgelegt ist, beobachtet. Es tritt jedoch kein Scroll Chaining in benachbarten Scrollbereichen auf; die darunter liegenden Elemente werden nicht scrollen. Der Wert
containdeaktiviert die native Navigation des Browsers, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wischnavigation. none-
Es tritt kein Scroll Chaining in benachbarten Scrollbereichen auf und das standardmäßige Verhalten bei Scroll-Überlauf 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
Verhinderung von Inline-Overscrolling
In dieser Demo haben wir zwei Blocklevel-Boxen, eine in der anderen. Die äußere Box hat eine große width eingestellt, sodass die Seite horizontal scrollen wird. Die innere Box hat eine kleine Breite (und height) eingestellt, sodass sie bequem im Ansichtsfenster sitzt, aber ihr Inhalt hat eine große Breite, sodass auch sie horizontal scrollen wird.
Standardmäßig, wenn die innere Box gescrollt wird und eine Scrollgrenze erreicht ist, wird die gesamte Seite zu scrollen beginnen, was wahrscheinlich nicht gewünscht ist. Um dies in der Inline-Richtung zu vermeiden, haben wir overscroll-behavior-inline: contain auf die innere 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 |