overscroll-behavior-block

La propietat CSS overscroll-behavior-block estableix el comportament del navegador quan s'arriba al límit de direcció de bloc d'una àrea de desplaçament.

Veure overscroll-behavior per a una explicació completa.

/* 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: unset;

La propietat overscroll-behavior-block s'especifica com una paraula clau triada de la llista de valors de sota.

auto

El comportament per defecte de desbordament de desplaçament es produeix com a normal.

contain

El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (e.ex. Els efectes "rebot" o refrescs), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.

none

No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.

contain | (en-US) none | (en-US) auto

En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran height establert en ella de manera que la pàgina es desplaçarà verticalment. La caixa interior té una petita width (i height) establerta sobre ella de manera que s'assenta de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una gran height de manera que també es desplaçarà verticalment..

Per defecte, quan la capsa interior es desplaça i s'arriba a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció del bloc, hem establert overscroll-behavior-block: contain en la caixa interior.

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, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 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, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}

p {
  padding: 10px;
  background-color: rgba(255,0,0,0.5);
  margin: 0;
  width: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}

Resultat

• Prendre el control del desplaçament: personalitzar els efectes de extreure-per-refrescar i desbordament