Propriété CSS `overscroll-behavior-inline`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS overscroll-behavior-inline définit le comportement d'un navigateur lorsqu'il atteint la limite de défilement dans la direction en ligne (horizontale).

Voir overscroll-behavior pour une explication complète.

Syntaxe

css

/* Valeurs avec un mot-clé */
overscroll-behavior-inline: auto; /* Par défaut */
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;

/* Valeurs globales */
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;

La propriété overscroll-behavior-inline est définie avec un mot-clé choisi parmi la liste des valeurs ci-dessous.

Valeurs

auto: Le comportement de dépassement de défilement par défaut se produit normalement.
contain: Le comportement de dépassement de défilement par défaut (par exemple, les effets de « rebondissement ») est observé à l'intérieur de l'élément où cette valeur est définie. Cependant, aucun enchaînement de défilement ne se produit sur les zones de défilement voisines ; les éléments sous-jacents ne défileront pas. La valeur contain désactive la navigation native du navigateur, y compris le geste de « tirer pour actualiser » vertical et la navigation par balayage horizontal.
none: Aucun enchaînement de défilement ne se produit vers les zones de défilement voisines, et le comportement de dépassement de défilement par défaut est empêché.

Définition formelle

Valeur initiale	`auto`
Applicabilité	les éléments de bloc non remplacés et les éléments en bloc en ligne et en bloc (inline-block)
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

overscroll-behavior-inline = 
  contain  |
  none     |
  auto     |
  chain

Dans cette démonstration, nous avons deux boîtes de niveau bloc, l'une à l'intérieur de l'autre. La boîte externe a une grande width définie dessus afin que la page puisse défiler horizontalement. La boîte interne a une petite largeur (et height) définie dessus afin qu'elle s'adapte confortablement à l'intérieur de la fenêtre d'affichage, mais son contenu a une grande largeur afin qu'il puisse également défiler horizontalement.

Par défaut, lorsque la boîte interne est défilée et qu'une limite de défilement est atteinte, toute la page commencera à défiler, ce qui n'est probablement pas ce que nous voulons. Pour éviter que cela ne se produise dans la direction en ligne, nous avons défini overscroll-behavior-inline: contain sur la boîte interne.

HTML

html

<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> a été utilisé pour faire en
        sorte que lorsque les limites de défilement de la boîte interne jaune
        sont atteintes, toute la page ne commence pas à défiler.
      </p>
    </div>
  </div>
</main>

CSS

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;
}