Overscroll-behavior - CSS-triks

Den overscroll-behavioreiendom i CSS bestemmer om et element vil bruke “rulle kjeding” eller ikke. Du har sannsynligvis opplevd denne oppførselen før, og kanskje tok det for gitt at rulling fungerer slik på nettet! Hvis du er inne i et element som har sin egen rulling (si at det er loddrett) og du har rullet ned til bunnen av det, så begynner som standard neste overordnede element opp (kanskje selve siden) å rulle i den retningen. Hvis du ikke vil at standard, overscroll-behaviorer det som styrer det.

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

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

Eiendommen kaskader (dvs. er arvet), så hvis du ikke liker noe element som gjør det, kan du bruke det på kroppen for å forhindre at det skjer hvor som helst:

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

Den noneverdien er ment å stoppe rulling affordance , som min beste gjetning betyr at sånt gummi banding ting som enkelte nettlesere gjør, spesielt enheter med touchpad rulling.

Standardverdien er auto.

Ressurser

CSS Overscroll Behavior Module Nivå 1
Webplattform Nyheter

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome	Firefox	DVS	Kant	Safari
65	59	11	79	Nei

Mobil / nettbrett

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nei

bakgrunnsfilter
synlighet på baksiden
bakgrunn
bakgrunn-vedlegg
bakgrunnsblandingsmodus
bakgrunn-klipp
bakgrunnsfarge
bakgrunnsbilde
bakgrunn-opprinnelse
bakgrunn-posisjon
bakgrunn-gjenta
bakgrunnsstørrelse
blø
blokk-overløp
grense
grense-grense
grense-kollaps
border-image
grense-radius
grense-avstand
bunn
boks-dekorasjon-pause
bokseskygge
boksstørrelse
innbrudd

bildetekst-side
vaktmester
caret-farge
vaktform
klar
klippesti
farge
fargejustering
kolonnetelling
kolonnefyll
kolonnegap
kolonne-regel
kolonne-regel-farge
kolonne-regel-stil
kolonne-regel-bredde
kolonnespenn
kolonnebredde
kolonner
inneholde
innhold
motøkning
mot tilbakestilling
motsett
markøren

retning
vise

tomme celler

fylle
filter
flex
flex-basis
flex-retning
flex-flow
flex-grow
flex-krympe
flex-wrap
flyte
font
font-display
font-familie
font-feature-innstillinger
font-kerning
font-optisk størrelse
skriftstørrelse
skriftstørrelsesjustering
font-stretch
fontstil
font-syntese
font-variant
font-variant-numerisk
skriftvekt

mellomrom
grid-row / grid-column
rutenett-mal-kolonner / rutenett-mal-rader

hengende-tegnsetting
høyde
bindestreker

Jeg

bilde-gjengivelse
første bokstav
inline-størrelse
innfelt
innfelt-blokk
innfelt-blokk-ende
innfelt-blokk-start
innfelt
innfelt-inline-end
innfelt-inline-start
isolering

rettferdiggjøre innhold
rettferdiggjøre-ting

venstre
avstand mellom bokstavene
linjeskift
linjeklemme
linjehøyde
liste-stil

margin
margin-blokk
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
maske-klipp
maske-bilde
maske-modus
maske-opprinnelse
maske-posisjon
maske-gjenta
maske-størrelse
maks-høyde
maks-inline-størrelse
maks bredde
min høyde
min bredde
bland-bland-modus

objekt-passform
objekt-posisjon
offset-anker
offset-avstand
offset-sti
forskjøvet-roter
opasitet
rekkefølge
foreldreløse
disposisjon
kontur-offset
flyte
overløpsanker
overflow-wrap
overscroll-atferd

polstring
sideskift
malingsbestilling
perspektiv
perspektiv-opprinnelse
sted-ting
pekerehendelser
stilling

Spørsmål

sitater

endre størrelse
Ikke sant
radgap

bla-oppførsel
rullegardin
rulle-polstring
bla-snap-juster
bla-snap-stopp
bla-snap-type
rullefelt
rullefeltfarge
rullebarrenne
rullefeltbredde
form-bilde-terskel
form-margin
form-utenfor
snakke
hjerneslag
slag-dasharray
slag-dashoffset
stroke-linecap
stroke-linejoin
slagbredde

tab-størrelse
bordoppsett
tekstjustering
text-align-last
tekst-kombinere-oppreist
tekstdekorasjon
tekst-dekor-farge
tekst-dekorasjon-linje
tekst-dekorasjon-hopp
tekst-dekorasjon-hopp over blekk
tekst-dekorasjon-stil
tekst-dekorasjon-tykkelse
tekstinnrykk
tekst-rettferdiggjøre
tekstorientering
tekst-overflow
tekstgjengivelse
tekst-skygge
tekststrek
tekst-transform
tekst-understreking-forskyvning
tekst-understrek-posisjon
topp / bunn / venstre / høyre
touch-action
forvandle
transform-opprinnelse
transform-stil
overgang
overgangsforsinkelse
overgangsvarighet
overgangseiendom
overgang-timing-funksjon

unicode-bidi
unicode-rekkevidde
brukervalg

loddrett
synlighet

hvit-plass
enker
bredde
Kommer til å endres
ordbrudd
ordavstand
skrivemodus

z-indeks
zoom

Velger

EN
- ::før etter
- :aktiv
- : hvilken som helst lenke
- Tilstøtende søsken
- (Egenskap)
B
- :blank
C
- :krysset av
- :strøm
- Barn
- Klasse
D
- :misligholde
- : dir ()
- :funksjonshemmet
- Etterkommer
E
- :tømme
- : aktivert
F
- ::første bokstav
- ::første linje
- :første barn
- : første av typen
- :fokus
- : fokus-synlig
- : fokus-innenfor
- :framtid
G
- Generelt søsken
H
- :sveve
Jeg
- :innen rekkevidde
- : ubestemt
- :ugyldig
- :er()
- ID
J
K
L
- : lang ()
- :siste barn
- : siste type
- : lenke
M
- :: markør
- :fyrstikker()
N
- :ikke()
- : niende barn
- : nest siste barn
- : n-siste-av-typen
- : nth-of-type
O
- :enebarn
- : bare av typen
- :valgfri
- :ute av rekkevidde
P
- :: plassholder
- :forbi
- : plassholder vist
Spørsmål
R
- : lese-skrive /: skrivebeskyttet
- : påkrevd
- :rot
S
- :: utvalg
T
- :mål
- Type
U
- : bruker-ugyldig
- Universell
V
- :gyldig
- : besøkt
W
X
Y
Z

Vår læringspartner

Frontend Masters

Trenger du front-end utviklingstrening?

Frontend Masters er det beste stedet å få det. De har kurs om alle de viktigste front-end teknologiene, fra React til CSS, fra Vue til D3, og videre med Node.js og Full Stack.