CSS overscroll-behavior eigenschap
- Vorige pagina overflow-y
- Volgende pagina overscroll-behavior-block
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; }
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; }
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
- Vorige pagina overflow-y
- Volgende pagina overscroll-behavior-block