CSS overscroll-behavior-block ιδιότητα

Ορισμός και χρήση

overscroll-behavior-block Η ιδιότητα χρησιμοποιείται για να απενεργοποιήσει τη σειρά κύλισης (scroll chaining) ή την παροχή ανατροφοδότησης για υπερκύλιση (overscroll affordance) στο στοιχείο όταν προσπαθεί να κουλιάσει πέρα από τα όρια κύλισης στον κατευθυντήριο άξονα.

The scroll chain refers to the scroll behavior of the parent element when over-scrolling occurs on an element. This is the default behavior.

Over-scroll 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, it is usually accompanied by a visual feedback of page refresh.

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

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

Example

Example 1

Turn off the scroll chain of the scrollable <div> element in the block direction:

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

Try it yourself

Example 2: Combining the writing-mode property

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

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

Try it yourself

CSS Syntax

overscroll-behavior-block: 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.

Σχετικές σελίδες

Αναφορά:CSS overscroll-behavior ιδιότητα

Αναφορά:CSS overscroll-behavior-inline ιδιότητα

Αναφορά:CSS overscroll-behavior-x ιδιότητα

Αναφορά:CSS overscroll-behavior-y ιδιότητα

Αναφορά:CSS scroll-behavior ιδιότητα

Αναφορά:CSS scroll-margin ιδιότητα

Αναφορά:CSS scroll-padding ιδιότητα

Αναφορά:CSS scroll-snap-align ιδιότητα

Αναφορά:CSS writing-mode ιδιότητα