Overscroll-adfærd - CSS-tricks

Den overscroll-behaviorejendom i CSS kontrollerer om et element vil bruge ”rulle kæde” eller ej. Du har sandsynligvis oplevet denne adfærd før og måske taget det for givet, at rulning fungerer sådan på nettet! Hvis du er inde i et element, der har sin egen rulning (sig det er lodret), og du har rullet ned til bunden af det, så starter som standard det næste overordnede element op (måske selve siden) at rulle i den retning. Hvis du ikke vil have denne standard, overscroll-behaviorer det der styrer den.

.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )

Se
pennens overscroll-opførsel af Chris Coyier (@chriscoyier)
på CodePen.

Ejendommens kaskader (dvs. er nedarvet), så hvis du ikke kan lide noget element, der gør det, kan du anvende det på kroppen for at forhindre, at det sker overalt:

body ( overscroll-behavior: contain; /* or "none" */ )

Den noneværdi er meningen at stoppe rulning affordance , som min bedste gæt betyder, at den slags gummi banding ting, at nogle browsere gør, især enheder med touchpad rulning.

Standardværdien er auto.

Ressourcer

CSS Overscroll Behavior Module niveau 1
Webplatform Nyheder

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
65	59	11	79	Ingen

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ingen

baggrundsfilter
synlighed på bagsiden
baggrund
baggrund-vedhæftet fil
baggrund-blanding-tilstand
baggrund-klip
baggrundsfarve
baggrundsbillede
baggrund-oprindelse
baggrund-position
baggrund-gentagelse
baggrundsstørrelse
bløde
blok-overløb
grænse
grænse-grænse
grænsekollaps
grænsebillede
grænse-radius
grænseafstand
bund
boks-dekoration-pause
box-shadow
boksstørrelse
indbrud

billedtekst-side
caret
caret-farve
caret-form
klar
klip-sti
farve
farvejustering
kolonnetælling
kolonnefyldning
kolonnegab
kolonne-regel
kolonne-regel-farve
kolonne-regel-stil
kolonne-regel-bredde
kolonne-span
søjlebredde
kolonner
indeholde
indhold
modforøgelse
counter-reset
modsæt
cursoren

retning
Skærm

tomme celler

fylde
filter
flex
flex-basis
flex-retning
flex-flow
flex-grow
flex-krympning
flex-wrap
flyde
skrifttype
font-display
font-familie
font-feature-indstillinger
font-kerning
font-optisk-størrelse
skriftstørrelse
skriftstørrelsesjustering
font-stretch
skrifttype
skriftsyntese
font-variant
font-variant-numerisk
skriftvægt

hul
gitter-række / gitter-kolonne
gitter-skabelon-kolonner / gitter-skabelon-rækker

hængende-tegnsætning
højde
bindestreger

jeg

billedgengivelse
første bogstav
inline-størrelse
indsat
indsat-blok
indsat-blok-ende
start-blok-start
indsat-inline
indsat-inline-ende
indsat-inline-start
isolation

retfærdiggør-indhold
retfærdiggøre-ting

venstre
mellemrum mellem bogstaver
line-break
linjeklemme
linjehøjde
liste-stil

margen
margin-blok
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
maske-klip
maske-billede
maske-tilstand
maske-oprindelse
maske-position
maske-gentagelse
maske-størrelse
maks. højde
max-inline-størrelse
maks. bredde
min-højde
min bredde
mix-blend-mode

objekt-fit
objekt-position
offset-anker
offset-afstand
offset-sti
forskudt-roter
Gennemsigtighed
bestille
forældreløse
omrids
kontur-offset
flyde over
overløbsanker
overløb-wrap
overscroll-adfærd

polstring
sideskift
maling-rækkefølge
perspektiv
perspektiv-oprindelse
sted-genstande
pointer-events
position

Spørgsmål

citater

ændre størrelse
ret
række-hul

rulle-adfærd
rul-margen
rulle-polstring
rul-snap-juster
rul-snap-stop
rul-snap-type
rullebar
rullepanel-farve
rullepanel-tagrender
rullepanelbredde
form-billede-tærskel
formmargen
form udenfor
tale
slag
slagtilfælde-dasharray
slagtilfælde
slagtilfælde
slagtilfælde
slaglængde

fanestørrelse
tabel-layout
tekstjustering
tekst-juster-sidst
tekst-kombinere-opretstående
tekst-dekoration
tekst-dekoration-farve
tekst-dekoration-linje
tekst-dekoration-spring
tekst-dekoration-spring-blæk
tekst-dekoration-stil
tekst-dekoration-tykkelse
tekstindryk
tekst-retfærdiggøre
tekstorientering
tekst-overløb
tekst-gengivelse
tekst-skygge
tekststreg
tekst-transformation
tekst-understregning-offset
tekst-understregning-position
øverst / nederst / venstre / højre
touch-handling
transformere
transform-oprindelse
transform-stil
overgang
overgangsforsinkelse
overgangsvarighed
overgangsejendom
overgang-timing-funktion

unicode-bidi
unicode-rækkevidde
brugervalg

lodret-juster
sigtbarhed

hvidt rum
enker
bredde
vil ændre sig
ordbrud
ordafstand
skrivemåde

z-indeks
zoom

Vælgere

EN
- ::før efter
- :aktiv
- : ethvert link
- Tilstødende søskende
- (attribut)
B
- :blank
C
- : kontrolleret
- :nuværende
- Barn
- Klasse
D
- :Standard
- : dir ()
- :handicappet
- Efterkommer
E
- :tom
- : aktiveret
F
- :: første bogstav
- ::første linje
- : første barn
- : første af typen
- :fokus
- : fokus-synlig
- : fokus indeni
- :fremtid
G
- Generelt søskende
H
- : svæver
jeg
- :inden for rækkevidde
- : ubestemt
- : ugyldig
- :er()
- ID
J
K
L
- : lang ()
- :sidste barn
- : sidste type
- :link
M
- :: markør
- :Tændstikker()
N
- :ikke()
- : niende barn
- : niende sidste barn
- : n-sidste-af-typen
- : n-type
O
- :enebarn
- : kun-af-typen
- :valgfri
- :uden for rækkevidde
P
- :: pladsholder
- :forbi
- : pladsholder vist
Spørgsmål
R
- : skrive-skrive /: skrivebeskyttet
- : krævet
- :rod
S
- ::udvælgelse
T
- :mål
- Type
U
- : bruger-ugyldig
- Universel
V
- :gyldig
- : besøgte
W
x
Y
Z

Vores læringspartner

Frontend Masters

Brug for front-end udviklingstræning?

Frontend Masters er det bedste sted at få det. De har kurser om alle de vigtigste front-end-teknologier, fra React til CSS, fra Vue til D3 og videre med Node.js og Full Stack.