Attribut overscroll-behavior-inline de CSS
- Page précédente overscroll-behavior-block
- Page suivante overscroll-behavior-x
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; }
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; }
CSS syntax
overscroll-behavior-inline: auto|contain|none|initial|inherit;
Property value
Value | Description |
---|---|
auto | Allows scroll chain and overscroll feedback behavior. Default value. |
contain | Allows overscroll feedback behavior but does not allow scroll chain. |
none | Disallows overscroll feedback or scroll chain behavior. |
initial | Sets this property to its default value. See initial. |
inherit | Inherits this property from its parent element. See inherit. |
Technical details
Default value: | auto |
---|---|
Inheritance: | No |
Animation production: | Not supported. See:Animation-related properties. |
Version: | CSS3 |
JavaScript syntax: | object.style.overscrollBehaviorInline="none" |
Browser support
The numbers in the table represent the browser version that first fully supports this property.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
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
- Page précédente overscroll-behavior-block
- Page suivante overscroll-behavior-x