Túlgörgetés-viselkedés - CSS-trükkök

A overscroll-behaviorCSS tulajdonság ellenőrzi, hogy egy elem használ-e görgetési láncolást vagy sem. Valószínűleg korábban is tapasztalta ezt a viselkedést, és talán természetesnek vette, hogy a görgetés így működik az interneten! Ha egy olyan elemen belül tartózkodik, amelynek saját görgetése van (mondjuk függőleges), és lefelé görgetett annak aljára, akkor alapértelmezés szerint a következő szülő elem felfelé (lehet, hogy maga az oldal) kezd ebben az irányban görgetni. Ha nem szeretné ezt az alapértelmezett beállítást, overscroll-behaviorakkor ez vezérli.

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

Lásd
Chris Coyier (@chriscoyier) Toll -túlgördülési viselkedését a CodePen
-en.

A tulajdonság kaszkádok (azaz öröklődik), így ha nem tetszik, hogy bármely elem csinálja, akkor alkalmazhatja a testre, hogy megakadályozza, hogy bárhol megtörténjen:

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

Az noneértéknek állítólag le kell állítania a túlkerekedést , ami a legjobb tippem szerint azt jelenti, hogy olyan dolgok, mint a gumiszalagok, amelyeket egyes böngészők tesznek, különösen az érintőpaddal görgető eszközök.

Az alapértelmezett érték auto.

Erőforrások

CSS Felügyeleti viselkedés modul 1. szint
Web Platform Hírek

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm	Firefox	AZAZ	Él	Szafari
65	59	11.	79	Nem

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	Nem

háttér-szűrő
hátlap-láthatóság
háttér
háttér-kötődés
background-blend-mode
háttér-klip
háttérszín
háttérkép
háttér-eredet
háttér-helyzet
háttérismétlés
háttérméret
vérzik
blokk-túlcsordulás
határ
határ-határ
határ-összeomlás
határ-kép
határsugár
határok közötti távolság
alsó
doboz-díszítés-törés
box-shadow
dobozméretezés
betörés

feliratoldali
hiányjel
karet-szín
karet alakú
egyértelmű
clip-path
szín
színbeállítás
oszlopszám
oszlopkitöltés
oszloprés
oszlop-szabály
oszlop-szabály-szín
oszlop-szabály stílus
oszlop-szabály-szélesség
oszlopfesztávolság
oszlop szélesség
oszlopok
tartalmaz
tartalom
ellennövekedés
számláló visszaállítása
kontraszett
kurzor

irány
kijelző

üres cellák

tölt
szűrő
Flex
rugalmas alapon
flex irányú
flex-flow
rugalmasan növekszik
flex-shrink
flex-wrap
úszó
betűtípus
font-display
betűtípus család
font-feature-settings
betűkészlet
betűtípus-optikai méretezés
betűméret
betűméret-beállítás
font-stretch
betű stílus
betűtípus-szintézis
font-variant
font-variant-numeric
betű súlya

rés
rács-sor / rács-oszlop
rács-sablon-oszlopok / rács-sablon-sorok

akasztás-írásjelek
magasság
kötőjelek

én

képmegjelenítés
kezdőbetű
inline méretű
betét
betét-blokk
betét-blokk-vég
beillesztés-blokk-indítás
beillesztett
beillesztett-inline-end
beillesztés inline-start
elkülönítés

igazol-tartalom
igazol-tételek

bal
betűtávolságok
sortörés
vonal-szorító
vonal-magasság
lista-stílusú

árrés
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
maszk-klip
maszk-kép
maszk-mód
maszk-eredetű
maszk-helyzet
maszk-ismétlés
maszkméret
maximum magasság
max-inline-size
max szélesség
min-magasság
min-szélesség
mix-blend-mód

tárgy-illeszkedés
tárgy-helyzet
offset-horgony
eltolt távolság
offset-path
eltolás-forgatás
átlátszatlanság
rendelés
árvák
vázlat
vázlat-eltolás
túlcsordulás
túlcsordulás-horgony
túlcsordulás-burkolás
túlgörgetés-viselkedés

párnázás
oldaltörés
festékrendelés
perspektíva
perspektíva-eredet
hely-tételek
pointer-események
pozíció

idézetek

átméretezni
jobb
sor-rés

görgetés-viselkedés
görgetés-margó
tekercs-párnázás
görgetés-bepattintás-igazítás
görgetés-bepattintás
görgetés-bepattintás típusú
görgetősáv
görgetősáv-szín
görgetősáv-ereszcsatorna
görgetősáv-szélesség
alak-kép-küszöb
alak-margó
alak-kívül
beszél
stroke
stroke-dasharray
stroke-dashoffset
stroke-béléssapka
stroke-linejoin
szélesség

fülméret
táblázat-elrendezés
szöveg igazítás
text-align-last
szöveg-össze-függőleges
szövegdíszítés
szöveg-dekoráció-szín
szöveg-dekoráció-sor
szöveg-dekoráció-ugrás
szöveg-dekoráció-ugró-tinta
szöveg-dekoráció-stílus
szöveg-dekoráció-vastagság
szöveg-behúzás
szöveg-igazolja
szöveg-orientáció
szöveg-túlcsordulás
szövegmegjelenítés
szöveg-árnyék
szövegvonás
szöveg-átalakítás
szöveg-aláhúzás-eltolás
szöveg-aláhúzás-pozíció
felső / alsó / bal / jobb
érintés-cselekvés
átalakul
átalakulás-eredet
átalakulási stílusú
átmenet
átmenet-késleltetés
átmenet-időtartam
átmenet-tulajdonság
átmenet-időzítés-függvény

unicode-bidi
unicode-tartomány
user-select

függőleges-igazítás
láthatóság

fehér űr
özvegyek
szélesség
meg fog változni
szótörés
szóköz
írásmód

z-index
zoomolás

Válogatók

A
- ::előtte utána
- :aktív
- : any-link
- Szomszédos testvér
- (tulajdonság)
B
- :üres
C
- : bejelölt
- :jelenlegi
- Gyermek
- Osztály
D
- : alapértelmezett
- : dir ()
- :Tiltva
- Leszármazott
E
- :üres
- : engedélyezve
F
- ::első levél
- ::első sor
- :első gyerek
- : első típusú
- :fókusz
- : fókusz látható
- : fókusz-belül
- :jövő
G
- Általános testvér
H
- :lebeg
én
- :hatótávolságban
- :határozatlan
- :érvénytelen
- : van ()
- ID
J
K
L
- : lang ()
- :utolsó gyerek
- : utolsó típusú
- :link
M
- ::jelző
- : mérkőzések ()
N
- :nem()
- : n-dik gyermek
- : n-edik-utolsó
- : n-edik típus-utolsó
- : n-dik típus
O
- :egyedüli gyermek
- : csak típusú
- :választható
- :hatótávolságon kívül
P
- ::helykitöltő
- :múlt
- : helyőrző-látható
Q
R
- : írás-írás /: csak olvasható
- :kívánt
- :gyökér
S
- ::kiválasztás
T
- :cél
- típus
U
- : user-invalid
- Egyetemes
V
- :érvényes
- : meglátogatott
W
x
Y
Z

Tanulási partnerünk

Frontend Masters

Szüksége van front-end fejlesztő képzésre?

A Frontend Masters a legjobb hely a megszerzéséhez. Tanfolyamokat tartanak a legfontosabb front-end technológiákról, a React-től a CSS-ig, a Vue-tól a D3-ig, és azon túl a Node.js és a Full Stack segítségével.