overscroll-behavior-inline

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.

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

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