overscroll-behavior-y
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-y définit le comportement du navigateur lorsqu'il atteint la limite verticale d'une zone de défilement.
Voir overscroll-behavior pour plus de détails.
Syntaxe
/* Valeurs avec un mot-clé */
overscroll-behavior-y: auto; /* Par défaut */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;
/* Valeurs globales */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
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 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
containdé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-y =
contain |
none |
auto
Exemples
Empêcher un élément sous-jacent de défiler verticalement
.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}
Voir overscroll-behavior pour un exemple complet et plus de détails.
Spécifications
| Spécification |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
overscroll-behavior - La propriété
overscroll-behavior-x - La propriété
overscroll-behavior-inline - La propriété
overscroll-behavior-block - Le module du comportement de dépassement de défilement CSS