Nadmerné správanie - Triky CSS

overscroll-behaviorNehnuteľnosť v kontrolách CSS, či prvok bude používať "navigačné zreťazenie" alebo nie. Pravdepodobne ste toto správanie už niekedy zažili a možno ste brali ako samozrejmosť, že posúvanie funguje na webe takto! Ak sa nachádzate vo vnútri prvku, ktorý má svoje vlastné rolovanie (povedzme, že je to zvislé), a vy ste rolovali nadol k jeho dolnej časti, predvolene sa nasledujúci nadradený prvok (možno stránka sama) začne posúvať týmto smerom. Ak toto predvolené nastavenie nechcete, overscroll-behaviorbude sa riadiť týmto.

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

Pozrite si
chovanie prekročenia pera od Chrisa Coyiera (@chriscoyier)
na stránke CodePen.

Vlastnosť kaskáduje (tj je zdedená), takže ak sa vám nepáči, že by to robil niektorý prvok, môžete ho použiť na telo a zabrániť tak tomu, aby sa to stalo kdekoľvek:

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

noneHodnota má zastaviť overscroll affordance , ktoré Podľa môjho najlepšieho odhadu znamená, že podobné veci gumové pruhy veci, ktoré niektoré prehliadače vykonať, najmä zariadenia s touchpadom rolovanie.

Predvolená hodnota je auto.

Zdroje

Modul správania sa pri nadmernom posune CSS, úroveň 1
Novinky na webovej platforme

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
65	59	11	79	Nie

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nie

filter pozadia
viditeľnosť pozadia
pozadie
príloha na pozadí
režim prelínania pozadia
klip na pozadie
farba pozadia
obrázok na pozadí
pôvod pozadia
Pozícia na pozadí
opakovanie pozadia
veľkosť pozadia
krvácať
prepad bloku
hranica
hranica-hranica
kolaps hraníc
hraničný obrázok
polomer hranice
medzery medzi riadkami
dole
box-dekorácia-prestávka
tieňový box
box-dimenzovanie
vlámanie do vnútra

strana s titulkami
strieška
striebro-farba
tvar striech
jasný
klip-cesta
farba
farebne upraviť
počet stĺpcov
vyplnenie stĺpca
medzera v stĺpci
stĺpcové pravidlo
stĺpec-pravidlo-farba
štýl stĺpcového pravidla
šírka pravidla pravidla
rozpätie stĺpca
šírka stĺpca
stĺpce
obsahovať
obsah
protiprirastok
protinastavenie
protisúbor
kurzor

smer
displej

prázdne bunky

vyplniť
filter
flex
flex-základ
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
plavák
písmo
font-display
rodina fontov
nastavenie písma-funkcie
vyrovnanie písma
veľkosť písma-optická
veľkosť písma
upraviť veľkosť písma
font-stretch
štýl písma
syntéza písma
variant písma
font-variant-numerický
váha písma

medzera
mriežka-riadok / mriežka-stĺpec
stĺpce mriežky-šablóny / riadky mriežky-šablóny

závesná interpunkcia
výška
pomlčky

vykreslenie obrazu
začiatočné písmeno
vložená veľkosť
vložka
vložený blok
vložený-blok-koniec
vložený blok-štart
vložený riadok
vložený koniec
vložený-vložený-štart
izolácia

justify-content
zarovnať-položky

vľavo
medzery medzi písmenami
zalomenie riadku
svorka na vedenie
výška čiary
štýl zoznamu

rozpätie
okrajový blok
koniec bloku
margin-block-start
vložený okraj
margin-inline-end
margin-inline-start
klip na masku
maska-obraz
režim masky
pôvod masky
poloha masky
maska-opakovat
veľkosť masky
maximálna výška
max-inline-size
max-šírka
min. výška
min. šírka
mix-blend-mode

fit-objekt
pozícia objektu
offset-kotva
offsetová vzdialenosť
offset-path
offset-rotácia
nepriehľadnosť
objednať
siroty
obrys
obrysový ofset
prepad
prepadová kotva
prepadový obal
nadmerné správanie

vypchávka
zlom strany
poradie farieb
perspektíva
perspektívny pôvod
miesto-položky
ukazovateľové udalosti
pozíciu

citácie

zmeniť veľkosť
správny
riadková medzera

rolovacie chovanie
rolovanie-okraj
rolovanie-polstrovanie
rolovanie-zarovnanie
rolovanie-zastavenie
typ rolovania
Posuvník
farba posuvného pruhu
posuvný žliabok
šírka posuvného pruhu
tvar-obraz-prah
tvarový okraj
tvarovo zvonka
hovor
mŕtvica
mŕtvica-dasharray
zdvih-dashoffset
mŕtvica-čiapka
ťah-linejoin
šírka ťahu

veľkosť tabuľky
rozloženie tabuľky
zarovnať text
zarovnať text-posledný
text-kombinovat-vzpriamene
textová výzdoba
textová dekorácia-farba
riadok dekorácie textu
text-dekorácia-preskočiť
text-dekorácia-skip-atrament
štýl dekorácie textu
hrúbka textovej dekorácie
odsadenie textu
zarovnať text
orientácia na text
pretečenie textu
vykreslenie textu
tieňový text
ťah textu
textová transformácia
odsadenie textu-podčiarknutia
pozícia podčiarknutia textu
hore / dole / vľavo / vpravo
dotyková akcia
transformovať
transformačný pôvod
transformačný štýl
prechod
prechodové oneskorenie
prechod-doba trvania
prechodný majetok
funkcia prechodu načasovanie

unicode-bidi
rozsah unicode
výber používateľa

vertical-align
viditeľnosť

Biely vesmír
vdovy
šírka
zmení sa
prestávka na slovo
medzery medzi slovami
režim písania

z-index
zväčšiť

Selektory

A
- ::predtým potom
- : aktívny
- : akýkoľvek odkaz
- Susediaci súrodenec
- (atribút)
B
- : prázdne
C.
- : začiarknuté
- : aktuálna
- Dieťa
- Trieda
D
- : predvolené
- : dir ()
- : zdravotne postihnutý
- Potomok
E
- : prázdny
- : povolené
F
- ::prvé písmeno
- ::prvá línia
- : prvé dieťa
- : prvý typ
- : zameranie
- : viditeľné zaostrenie
- : zameranie-dovnútra
- : budúcnosť
G
- Všeobecný súrodenec
H
- :vznášať sa
Ja
- :v dosahu
- : neurčitý
- : neplatné
- :je()
- ID
J
K
Ľ
- : lang ()
- :posledné dieťa
- : posledný typ
- : odkaz
M
- :: značka
- :zápasy()
N
- : nie ()
- : n-te dieťa
- : n-posledné dieťa
- : n -ty posledný z typu
- : n-tý typ
O
- :len dieťa
- : iba typu
- : voliteľné
- :mimo rozsah
P
- :: zástupný symbol
- : minulosť
- : zobrazený zástupný symbol
Q
R
- : read-write /: read-only
- :požadovaný
- : koreň
S
- :: výber
T
- : cieľ
- Typ
U
- : user-invalid
- Univerzálny
V.
- : platný
- : navštívené
Ž
X
Y.
Z

Naši

majstri frontendu Learning Partner

Potrebujete tréning front-endového vývoja?

Frontend Masters je najlepším miestom na jeho získanie. Majú kurzy všetkých najdôležitejších front-end technológií, od React po CSS, od Vue po D3 a ďalej pomocou Node.js a Full Stack.