Překročení-chování - Triky CSS

overscroll-behaviorNemovitost v kontrolách CSS, zda prvek bude používat „navigační zřetězení“ nebo ne. Pravděpodobně jste toto chování již dříve zažili a možná jste považovali za samozřejmost, že rolování funguje na webu takto! Pokud jste uvnitř prvku, který má vlastní rolování (řekněme, že je to svislé) a posunuli jste se dolů do jeho spodní části, pak se ve výchozím nastavení začne další nadřazený prvek nahoru (možná samotná stránka) posouvat tímto směrem. Pokud toto výchozí nastavení nechcete, overscroll-behaviorřídí se tím.

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

Podívejte se na
chování překročení pera Chrisem Coyierem (@chriscoyier)
na CodePen.

Vlastnost kaskáduje (tj. Je zděděna), takže pokud se vám nelíbí žádný prvek, který by to dělal, můžete jej použít na tělo, abyste zabránili tomu, aby se to stalo kdekoli:

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

noneHodnota má zastavit overscroll affordance , které Podle mého nejlepšího odhadu znamená, že podobné věci gumové pruhy věci, které některé prohlížeče provést, zejména zařízení s touchpadem rolování.

Výchozí hodnota je auto.

Zdroje

CSS Overscroll Behavior Module Level 1
Novinky z webové platformy

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
65	59	11	79	Ne

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ne

filtr pozadí
viditelnost pozadí
Pozadí
příloha na pozadí
režim míchání na pozadí
klip na pozadí
barva pozadí
obrázek na pozadí
původ pozadí
pozice na pozadí
opakování pozadí
velikost pozadí
krvácet
přetečení bloku
okraj
hranice-hranice
kolaps hranic
hraniční obrázek
poloměr ohraničení
mezery mezi okraji
dno
box-dekorace-break
stín stínu
velikost krabice
vloupání

strana s titulky
stříška
stříška-barva
stříška
Průhledná
clip-path
barva
upravit barvu
počet sloupců
vyplnění sloupce
sloupová mezera
sloupcové pravidlo
color-rule-color
styl sloupcového pravidla
width-rule-width
rozpětí sloupců
šířka sloupce
sloupce
obsahovat
obsah
protipřírůstek
vynulování
protistrana
kurzor

směr
Zobrazit

prázdné buňky

vyplnit
filtr
flex
flex-základ
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
plovák
písmo
zobrazení písma
rodina fontů
nastavení funkce písma
vyrovnání písma
optická velikost písma
velikost písma
upravit velikost písma
roztažení písma
styl fontu
syntéza písma
varianta písma
varianta písma-numerická
váha písma

mezera
grid-row / grid-column
grid-template-columns / grid-template-riadky

závěsná interpunkce
výška
pomlčky

Já

vykreslování obrazu
počáteční písmeno
vložená velikost
vložka
vložený blok
konec vloženého bloku
vložený blok-začátek
vložený řádek
vložený konec
vložený-inline-start
izolace

justify-content
justify-items

vlevo, odjet
mezery mezi písmeny
konec řádku
svorka linky
výška čáry
styl seznamu

okraj
blok okrajů
end-block-end
začátek okrajového bloku
vložený okraj
okraj-vložený-konec
začátek okraje
klip na masku
maska-obraz
režim masky
původ masky
pozice masky
maska-opakovat
velikost masky
Maximální výška
max. vložená velikost
maximální šířka
minimální výška
min. šířka
režim mix-blend

přizpůsobení objektu
pozice objektu
offset-kotva
vzdálenost odsazení
offset-path
offset-rotace
neprůhlednost
objednat
sirotky
obrys
obrysový offset
přetékat
přepadová kotva
přetékání
překročení chování

polstrování
konec stránky
objednávka barvy
perspektivní
perspektivní původ
místo-položky
události ukazatele
pozice

citáty

změnit velikost
že jo
mezera mezi řádky

svitkové chování
rolovací okraj
rolovací polstrování
rolovat-zarovnat
rolování-snap-stop
rolovací typ
Posuvník
barva posuvníku
rolovací lišta
šířka posuvníku
práh obraz-obraz
tvarový okraj
tvarově mimo
mluvit
mrtvice
mrtvice-dasharray
mrtvice-dashoffset
tah-linecap
tah-linejoin
šířka tahu

velikost karty
rozložení tabulky
zarovnání textu
zarovnat text-poslední
text-kombinovat-svisle
textová výzdoba
barva textové dekorace
řádek textové dekorace
přeskočení textové dekorace
text-dekorace-přeskočit-inkoust
styl dekorace textu
tloušťka textové dekorace
odsazení textu
zarovnání textu
orientace textu
přetečení textu
vykreslování textu
textový stín
textový tah
textová transformace
odsazení textu podtržení
pozice podtržení textu
nahoře / dole / vlevo / vpravo
dotyková akce
přeměnit
transformační původ
transformační styl
přechod
přechodové zpoždění
doba přechodu
vlastnost přechodu
funkce časování přechodu

unicode-bidi
rozsah unicode
výběr uživatele

PROTI

vertikální zarovnání
viditelnost

prázdné znaky
vdovy
šířka
změní se
přestávka na slovo
řádkování slov
režim psaní

z-index
Zvětšení

Selektory

A
- :: před / :: po
- :aktivní
- : jakýkoli odkaz
- Sousedící sourozenec
- (atribut)
B
- :prázdný
C
- :kontrolovány
- :aktuální
- Dítě
- Třída
D
- : výchozí
- : dir ()
- : deaktivováno
- Potomek
E
- :prázdný
- : povoleno
F
- ::první dopis
- ::první řada
- :první dítě
- : první typu
- :soustředit se
- : viditelné zaostření
- : zaostření uvnitř
- :budoucnost
G
- Obecný sourozenec
H
- :vznášet se
Já
- :v dosahu
- :neurčitý
- :neplatný
- :je()
- ID
J
K.
L
- : lang ()
- :poslední dítě
- : poslední typu
- :odkaz
M
- ::popisovač
- :zápasy()
N
- :ne()
- : n-dítě
- : n-poslední dítě
- : n-posledního typu
- : n-tý typ
Ó
- :Jedináček
- : pouze typu
- :volitelný
- :mimo dosah
P
- :: zástupný symbol
- :minulý
- : zobrazen zástupný symbol
Q
R
- : read-write /: read-only
- :Požadované
- :vykořenit
S
- ::výběr
T
- :cílová
- Typ
U
- : uživatel neplatný
- Univerzální
PROTI
- :platný
- : navštíveno
Ž
X
Y
Z

Naši

učitelé Frontend Masters pro učení

Potřebujete školení front-endového vývoje?

Frontend Masters je tím nejlepším místem pro jeho získání. Mají kurzy všech nejdůležitějších front-end technologií, od React po CSS, od Vue po D3 a dále s Node.js a Full Stack.