overscroll-behavior-x

La propriété CSS overscroll-behavior-x permet de contrôler le comportement de l'agent utilisateur lorsqu'on dépasse la limite de la zone de défilement sur l'axe horizontal.

Note : Voir overscroll-behavior pour plus de détails.

Syntaxe

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

/* Valeurs globales */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
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 normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
none
Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.

Syntaxe formelle

contain | none | auto

Exemples

Dans l'exemple overscroll-behavior-x (cf. le code source associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec width afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec height) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement.

Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant overscroll-behavior-x: contain sur la boîte intérieure :

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

Spécifications

Spécification État Commentaires
Unknown
La définition de 'overscroll-behavior-x' dans cette spécification.
Statut inconnu  

Valeur initialeauto
Applicabilitéles éléments de bloc non remplacés et les éléments en bloc en ligne et en bloc (inline-block)
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple63 Non59 Non50 ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple6363 Non5950 ? Non

Voir aussi

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,