overscroll-behavior-inline

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die overscroll-behavior-inline CSS Eigenschaft 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

css
/* 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 Schlüsselwort aus der folgenden Liste von Werten spezifiziert.

Werte

auto

Das Standardverhalten bei Überlauf während des Scrollens tritt wie gewohnt auf.

contain

Das Standardverhalten bei Überlauf während des Scrollens (z.B. „Bounce“-Effekte) wird innerhalb des Elements beobachtet, in dem dieser Wert gesetzt ist. Es occurs jedoch kein scroll chaining auf benachbarten Scrollbereichen; die darunterliegenden Elemente werden nicht scrollen. Der Wert contain deaktiviert die native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der Horizontal-Swipe-Navigation.

none

Es tritt kein scroll chaining auf benachbarten Scrollbereichen auf, und das Standardverhalten bei Überlauf während des Scrollens wird verhindert.

Formale Definition

Initialer Wertauto
Anwendbar aufnicht ersetzte Blocklevel Elemente und nicht ersetzte Inlineblock Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

overscroll-behavior-inline = 
  contain  |
  none     |
  auto

Beispiele

Verhindern von Inline-Überscrollen

In diesem Demo 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), sodass sie bequem innerhalb des Viewports sitzt, aber ihr Inhalt hat eine große Breite, sodass sie 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

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

css
main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 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,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 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

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-longhands-logical

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch