overscroll-behavior-block

/* 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 overscroll-behavior-block-Eigenschaft wird als Schlüsselwort aus der unten stehenden Liste von Werten angegeben.

auto

Das Standardverhalten bei Scroll-Überlauf tritt wie gewohnt auf.

contain

Standardverhalten bei Scroll-Überlauf (z. B. "Bounce"-Effekte) wird innerhalb des Elements beobachtet, auf das dieser Wert angewendet wird. Es tritt jedoch kein Scroll Chaining in benachbarten Scrollbereichen auf; die darunter liegenden Elemente scrollen nicht. Der Wert contain deaktiviert die native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wischnavigation.

none

Kein Scroll Chaining tritt in benachbarte Scrollbereiche auf und das Standardverhalten bei Scroll-Überlauf wird verhindert.

overscroll-behavior-block = 
  contain  |
  none     |
  auto     

In diesem Demo haben wir zwei Blockebenen-Boxen, eine in der anderen. Die äußere Box hat eine große height festgelegt, sodass die Seite vertikal scrollt. Die innere Box hat eine kleine width (und height) festgelegt, sodass sie bequem im Viewport liegt, aber ihr Inhalt hat eine große height, sodass er auch vertikal scrollt.

Standardmäßig, wenn die innere Box gescrollt wird und eine Scrollgrenze erreicht ist, beginnt die ganze Seite zu scrollen, was wahrscheinlich nicht gewünscht ist. Um dies in Blockrichtung zu verhindern, 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,
    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-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to bottom,
    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: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}

Ergebnis

• overscroll-behavior
• overscroll-behavior-x
• overscroll-behavior-y
• overscroll-behavior-inline
• CSS overscroll behavior Modul