Attribut overscroll-behavior de CSS

Définition et utilisation

overscroll-behavior L'attribut est utilisé pour désactiver la chaîne de défilement (scroll chaining) ou le retour d'information du défilement excessif (overscroll affordance) lors de la tentative de défilement au-delà des limites du défilement.

Chaîne de défilement : lorsque le défilement excessif se produit sur un élément, cela entraîne le comportement de défilement du parent. C'est le comportement par défaut.

Retour d'information du défilement excessif : retour fourni à l'utilisateur lorsqu'il tente de dérouler au-delà des limites du défilement. Par exemple, en tentant de dérouler au-delà du sommet de la page sur un appareil mobile, une rétroaction visuelle est généralement affichée et la page est actualisée.

overscroll-behavior Cet attribut est une forme abrégée des propriétés suivantes :

overscroll-behavior Les valeurs de l'attribut peuvent être définies de différentes manières :

Si l'attribut overscroll-behavior a deux valeurs :

overscroll-behavior: none contain;
  • Direction x : pas de comportement de défilement excessif
  • Direction y : pas de chaîne de défilement, mais autorise les rétroactions de défilement excessif

Si l'attribut overscroll-behavior a une valeur :

overscroll-behavior: contain;
  • Directions x et y : pas de chaîne de défilement, mais autorise les rétroactions de défilement excessif

Instance

Exemple 1

Fermez la chaîne de défilement de l'élément <div> glissant :

#yellowDiv {
  overscroll-behavior: contain;
}

Essayez-le vous-même

Exemple 2 : syntaxe à deux valeurs :

Met overscroll-behavior La valeur de l'attribut est définie sur auto none，permet les chaînes de défilement et les rétroactions de défilement excessif dans la direction x, mais pas dans la direction y :

#pinkDiv {
  overscroll-behavior: auto none;
}

Essayez-le vous-même

Syntaxe CSS

overscroll-behavior: auto|contain|none|initial|inherit;

Valeur de propriété

Valeur Description
auto Permet les chaînes de défilement et les rétroactions de défilement excessif. Valeur par défaut.
contain Permet les rétroactions de défilement excessif mais pas les chaînes de défilement.
none Ne permet pas les rétroactions de défilement excessif ou les comportements de chaîne de défilement.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : auto
Héritabilité : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.overscrollBehavior="none"

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* Dans Microsoft Edge, la valeur de propriété 'none' est traitée comme 'contain', ce qui est incorrect.

Pages associées

Référence :Attribut overscroll-behavior-x de CSS

Référence :Attribut overscroll-behavior-y de CSS

Référence :Attribut scroll-behavior de CSS

Référence :Attribut scroll-margin de CSS

Référence :Attribut scroll-padding CSS

Référence :Attribut scroll-snap-align CSS