Attribut overscroll-behavior-inline de CSS

Définition et utilisation

overscroll-behavior-inline Cette propriété permet de fermer la chaîne de défilement de l'élément ou de fournir un retour d'information sur le défilement excessif lorsque l'on essaie de dérouler au-delà des limites de défilement en direction de ligne.

Note:Pour déclencher overscroll-behavior en direction de ligne, vous pourriez devoir utiliser des gestes de glissement sur le pavé tactile ou l'écran tactile.

Scroll chain refers to the scroll behavior of the parent element when overscroll occurs on an element. This is the default behavior.

Overscroll feedback is the feedback given when the user tries to scroll beyond the scroll boundary. For example, on mobile devices, when trying to scroll beyond the top of the page, there is usually a visual feedback of page refresh.

CSS overscroll-behavior-inline and overscroll-behavior-block property with overscroll-behavior-x and overscroll-behavior-y The properties are very similar, but overscroll-behavior-inline and overscroll-behavior-block The property depends on the block direction and inline direction.

Note:Related CSS properties writing-mode It defines the inline direction. This affects whether the inline direction is in the x direction or y direction, and overscroll-behavior-inline The result of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Example

Example 1

Close the scroll chain of the scrollable <div> element in the inline direction:

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

Try it yourself

Example 2: Combined with the writing-mode attribute

Set the writing-mode When the attribute value is set to 'vertical-rl', the inline direction becomes the y direction, so overscroll-behavior-inline Now it works in the y direction instead of the x direction:

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

Try it yourself

CSS syntax

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

Property value

Technical details

Browser support

The numbers in the table represent the browser version that first fully supports this property.

page related

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

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

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

Référence :Attribut writing-mode CSS