overscroll-behavior-x

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-x définit le comportement du navigateur lorsqu'il atteint la limite horizontale d'une zone de défilement.

Voir overscroll-behavior pour plus de détails.

Syntaxe

css

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

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

La propriété overscroll-behavior-x est définie avec un des mots-clés définis ci-après.

Valeurs

auto: Le dépassement de la zone de défilement se déroule normalement.
contain: Le comportement de dépassement de la zone de défilement par défaut (par exemple, les effets de « rebond ») est observé à l'intérieur de l'élément où cette valeur est définie. Cependant, aucune chaîne 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 rafraîchissement vertical par glissement et la navigation horizontale par balayage.
none: Aucune chaîne de défilement ne se produit vers les zones de défilement voisines et le comportement de dépassement de la zone 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-x = 
  contain  |
  none     |
  auto

Dans notre exemple overscroll-behavior-x ^(angl.) (voir également le code source ^(angl.)), nous avons deux boîtes de niveau bloc, l'une à l'intérieur de l'autre. La boîte externe a une grande largeur (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 cela, vous pouvez définir overscroll-behavior-x: contain sur la boîte interne :

css

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}