overscroll-behavior-inline

This translation is incomplete. Please help translate this article from English

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

Veure overscroll-behavior per a una explicació completa.

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

Sintaxi

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

Valors

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 (p. ex. g. Els efectes "rebot o refrescs), 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.

Definició formal

Initial valueauto
Applies tonon-replaced block-level elements and non-replaced inline-block elements
Inheritedno
Computed valuecom s'especifica
Animation typediscrete

Sintaxi formal

contain | none | auto

Exemples

Evitar el desplaçament en línia

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

Per defecte, quan la caixa interior es desplaçi i s'arribi 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ó en línia, hem establert overscroll-behavior-inline: contain en la caixa interior.

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, 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-inline: contain;
}

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

Result

Specifications

Specification Status Comment
CSS Overscroll Behavior Module Level 1
The definition of 'overscroll-behavior-inline' in that specification.
Working Draft

Compatibilitat amb el navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
overscroll-behavior-inlineChrome Full support 77Edge Full support 79Firefox Full support 73IE No support NoOpera Full support 64Safari No support No
Notes
No support No
Notes
Notes See bug 176454.
WebView Android Full support 77Chrome Android Full support 77Firefox Android No support NoOpera Android Full support 55Safari iOS No support No
Notes
No support No
Notes
Notes See bug 176454.
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Veure també