CSS overscroll-behavior eigenschap

Definition and Usage

overscroll-behavior Properties used to disable the scroll chaining (scroll chaining) or over-scroll feedback (overscroll affordance) of an element when trying to scroll beyond the scroll boundaries.

Scroll Chain: When over-scrolling on an element, it causes the parent element's scroll behavior. This is the default behavior.

OverScroll Feedback: Feedback provided to the user when trying to scroll beyond the scroll boundaries. For example, when trying to scroll beyond the top of a page on a mobile device, a visual feedback is usually displayed and the page is refreshed.

overscroll-behavior De eigenschap is de verkorte vorm van de volgende eigenschappen:}

overscroll-behavior De waarde van de eigenschap kan op verschillende manieren worden ingesteld:

Als de overscroll-behavior-eigenschap twee waarden heeft:

overscroll-behavior: none contain;
  • X-richting: geen overmatig scrollgedrag
  • Y-richting: geen scrollchain, maar overmatige scrollfeedback toestaan

Als de overscroll-behavior-eigenschap een waarde heeft:

overscroll-behavior: contain;
  • X- en y-richting: geen scrollchain, maar overmatige scrollfeedback toestaan

Voorbeeld

Voorbeeld 1

Schakel de scrollchain van het scrolbare <div>-element uit:

#yellowDiv {
  overscroll-behavior: contain;
}

Probeer het zelf uit

Voorbeeld 2: Dubbele waarde syntaxis:

Stel overscroll-behavior De waarde van de eigenschap is ingesteld op auto none,x-richting scrollchain en overmatige scrollfeedback toestaan, maar y-richting niet toestaan:

#pinkDiv {
  overscroll-behavior: auto none;
}

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Scrollchain en overmatige scrollfeedbackgedrag toestaan. Standaardwaarde.
contain Overmatige scrollfeedbackgedrag toestaan, maar scrollchain niet toestaan.
none Overmatige scrollfeedback of scrollchaingedrag niet toestaan.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg inherit.

Technische details

Standaardwaarde: auto
Inheritantie: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.overscrollBehavior="none"

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* In Microsoft Edge wordt de waarde 'none' behandeld als 'contain', wat niet correct is.

Gerelateerde pagina's

Referentie:CSS overscroll-behavior-x eigenschap

Referentie:CSS overscroll-behavior-y eigenschap

Referentie:CSS scroll-behavior eigenschap

Referentie:CSS scroll-margin eigenschap

Referentie:CSS scroll-padding eigenschap

Referentie:CSS scroll-snap-align eigenschap