Proprietà CSS overscroll-behavior

Definizione e uso

overscroll-behavior L'attributo viene utilizzato per disattivare la catena di scorrimento (scroll chaining) o il feedback di scorrimento eccessivo (overscroll affordance) dell'elemento quando si tenta di scorrere oltre i limiti di scorrimento.

Catena di scorrimento: quando si scorre eccessivamente su un elemento, può causare il comportamento di scorrimento del genitore. Questo è il comportamento predefinito.

Feedback di scorrimento eccessivo: il feedback fornito all'utente quando si tenta di scorrere oltre i limiti di scorrimento. Ad esempio, quando si tenta di scorrere oltre la parte superiore della pagina su un dispositivo mobile, viene solitamente visualizzato un feedback visivo e la pagina viene aggiornata.

overscroll-behavior The property is a shorthand for the following properties:

overscroll-behavior The value of the property can be set in different ways:

If the overscroll-behavior property has two values:

overscroll-behavior: none contain;
  • x direction: no over-scroll behavior
  • y direction: no scroll chain, but allows over-scroll feedback

If the overscroll-behavior property has one value:

overscroll-behavior: contain;
  • x and y directions: no scroll chain, but allows over-scroll feedback

Instance

Example 1

Close the scroll chain of the scrollable <div> element:

#yellowDiv {
  overscroll-behavior: contain;
}

Try it yourself

Example 2: Dual-value syntax:

Sets overscroll-behavior The property value is set to auto none, allows scroll chain and over-scroll feedback in the x-direction, but not in the y-direction:

#pinkDiv {
  overscroll-behavior: auto none;
}

Try it yourself

CSS Syntax

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

Property value

Value Description
auto Allows scroll chain and over-scroll feedback behavior. Default value.
contain Allows over-scroll feedback behavior but does not allow scroll chain.
none Does not allow over-scroll 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 creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.overscrollBehavior="none"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* In Microsoft Edge, the property value 'none' is treated as 'contain', which is incorrect.

Pagine correlate

Riferimento:Proprietà CSS overscroll-behavior-x

Riferimento:Proprietà CSS overscroll-behavior-y

Riferimento:Proprietà CSS scroll-behavior

Riferimento:Proprietà CSS scroll-margin

Riferimento:Proprietà CSS scroll-padding

Riferimento:Proprietà CSS scroll-snap-align