CSS overscroll-behavior egenskap

Definition och användning

overscroll-behavior Egenskaper används för att stänga av elementets rullkedja (scroll chaining) eller överrullningsfeedback (overscroll affordance) när du försöker rulla utanför rullgränsen.

Rullkedja: När du överrullar på ett element, kan det leda till att förälderelementets rullbeteende påverkas. Detta är standardbeteende.

Överrullningsfeedback: Feedback som tillhandahålls till användaren när de försöker rulla utanför rullgränsen. Till exempel, när du försöker rulla utanför sidans topp på en mobil enhet, visas vanligtvis en visuell feedback och sidan uppdateras.

overscroll-behavior 属性是以下属性的简写形式：

overscroll-behavior overscroll-behavior-y

Värdet på egenskapen kan sättas på olika sätt:

Om overscroll-behavior-egenskapen har två värden:
  • overscroll-behavior: none contain;
  • x riktning: inget överrullningsbeteende

y riktning: ingen rullkedja, men tillåter överrullningsfeedback

#yellowDiv {
  • Om overscroll-behavior-egenskapen har ett värde:

x och y riktningar: ingen rullkedja, men tillåter överrullningsfeedback

Exempel

Exempel 1

Stäng av rullkedjan för en rullbar <div>-element:
  #yellowDiv {
}

Prova själv

overscroll-behavior: contain;

Exempel 2: Dubbelvärdes语法: overscroll-behavior Egenskapsvärdet sätts till auto none，tillåter rullkedja och överrullningsfeedback i x-riktningen, men inte i y-riktningen:

#pinkDiv {
  overscroll-behavior: auto none;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
auto Tillåt rullkedja och överrullningsfeedbackbeteende. Standardvärde.
contain Tillåt överrullningsfeedbackbeteende, men inte rullkedja.
none Tillåt inte överrullningsfeedback eller rullkedjebeteende.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Inheritera denna egenskap från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde: auto
Arvande: Nej
Animeringsproduktion: Stöds inte. Se till:Animeringsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.overscrollBehavior="none"

Webbläsarstöd

Talen i tabellen representerar den första webbläsarens version som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* I Microsoft Edge behandlas egenskapsvärdet 'none' som 'contain', vilket är felaktigt.

Relaterade sidor

Referens:CSS overscroll-behavior-x egenskap

Referens:CSS overscroll-behavior-y egenskap

Referens:CSS scroll-behavior egenskap

Referens:CSS scroll-margin egenskap

Referens:CSS scroll-padding egenskap

Referens:CSS scroll-snap-align egenskap