CSS overscroll-behavior egenskab

Definition og brug

overscroll-behavior Egenskaber bruges til at deaktivere rullekæden (scroll chaining) eller overrulningsfeedback (overscroll affordance) ved forsøg på at rulle uden for rulningsgrænserne.

Rullekæde: Når der overrulles i et element, kan det forårsage en rullebehandling af forældrenelementet. Dette er standardadferden.

Overrullingsfeedback: Feedback, der gives til brugeren, når de forsøger at rulle uden for rulningsgrænserne. For eksempel vises ofte visuel feedback og siden opdateres, når der prøves at rulle uden for toppen af en side på en mobil enhed.

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

• Egenskaben er en forkortelse for følgende egenskaber:
• overscroll-behavior-x

overscroll-behavior overscroll-behavior-y

Egenskabets værdi kan indstilles på forskellige måder:

Hvis overscroll-behavior-egenskaben har to værdier:

• overscroll-behavior: none contain;
• x retning: ingen overrulningsadfærd

y retning: ingen rulningskæde, men tillader overrulningsfeedback

#yellowDiv {

• Hvis overscroll-behavior-egenskaben har én værdi:

x og y retning: ingen rulningskæde, men tillader overrulningsfeedback

Eksempel

Eksempel 1

Slå af rulningskæden for en skrubbart <div>-element:
  #yellowDiv {
}

Prøv det selv

overscroll-behavior: contain;

Eksempel 2: Dobbeltværdisyntaks: overscroll-behavior Egenskabsværdien sættes til auto none，tillader rulningskæde og overrulningsfeedback i x-retningen, men ikke i y-retningen:

#pinkDiv {
  overroll-behavior: auto none;
}

Prøv det selv

CSS-syntaks

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

Egenskabsværdi

Tekniske detaljer

Browserunderstøttelse

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter egenskaben.

* I Microsoft Edge behandles værdien 'none' som 'contain', hvilket er forkert.

Relaterede sider

Reference:CSS overscroll-behavior-x egenskab

Reference:CSS overscroll-behavior-y egenskab

Reference:CSS scroll-behavior egenskab

Reference:CSS scroll-margin egenskab

Reference:CSS scroll-padding egenskab

Reference:CSS scroll-snap-align egenskab