overscroll-behavior-y

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

Syntaxe

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

/* Valeurs globales */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: 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.

Définition formelle

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
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

overscroll-behavior-y = 
contain |
none |
auto

Exemples

css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

Voir overscroll-behavior pour un exemple complet et plus de détails.

Spécifications

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-longhands-physical

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overscroll-behavior-y
auto
contain
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Voir aussi