Attribut overscroll-behavior-block CSS

Page précédente overscroll-behavior
Page suivante overscroll-behavior-inline

Définition et utilisation

overscroll-behavior-block La propriété est utilisée pour désactiver la chaîne de défilement (scroll chaining) ou le retour en arrière en cas de défilement excédentaire sur un élément lors de la tentative de défilement en direction de la bordure du bloc.

La chaîne de défilement est le comportement de défilement des éléments parent lorsque le défilement excessif se produit sur un élément. C'est le comportement par défaut.

Les rétroactions de défilement excessif sont des rétroactions fournies à l'utilisateur lorsqu'il essaie de dérouler au-delà des limites du défilement. Par exemple, sur les appareils mobiles, lorsque vous essayez de dérouler au-delà du sommet de la page, cela est souvent accompagné d'un rafraîchissement visuel de la page.

CSS overscroll-behavior-block et overscroll-behavior-inline L'attribut est similaire à overscroll-behavior-x et overscroll-behavior-y Les attributs sont très similaires, mais overscroll-behavior-block et overscroll-behavior-inline L'attribut dépend de la direction en bloc et de la direction en ligne.

Attention :Propriétés CSS associées writing-mode Définit la direction en bloc. Cela affecte si la direction en bloc est dans la direction x ou y, et overscroll-behavior-block Le résultat de l'attribut. Pour les pages en anglais, la direction en bloc est vers le bas, et la direction en ligne est de gauche à droite.

Exemple

Exemple 1

Fermez la chaîne de défilement glissante dans la direction en bloc pour l'élément <div> :

#yellowDiv {
  overscroll-behavior-block: contain;
}

Essayez-le vous-même

Exemple 2 : Combiner l'attribut writing-mode

Changez le writing-mode Lorsque l'attribut est défini sur 'vertical-rl', la direction en bloc devient la direction x, donc overscroll-behavior-block Maintenant, cela fonctionne dans la direction x,而非 dans la direction y :

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Permet les comportements de chaîne de défilement et de rétroaction 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écupère la valeur par défaut de cette propriété. Voir : initial.
inherit	Inherits this property from its parent element. Voir : inherit.

Détails techniques

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