Pretjerano ponašanje - CSS-trikovi

overscroll-behaviorNekretnina u CSS kontrola da li je element će koristiti „scroll ulančavanja” ili ne. Vjerojatno ste već doživjeli ovo ponašanje i možda ste uzeli zdravo za gotovo da takvo pomicanje radi na webu! Ako se nalazite u elementu koji ima vlastito pomicanje (recimo da je vertikalno) i pomaknuli ste se do dna, tada se prema zadanim postavkama sljedeći nadređeni element gore (možda i sama stranica) počinje pomicati u tom smjeru. Ako ne želite taj zadani zadatak, overscroll-behaviorono je što ga kontrolira.

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

Pogledajte
ponašanje olovke Chris Coyier (@chriscoyier)
na CodePenu.

Svojstvo se slaže (tj. Nasljeđuje se), pa ako vam se ne sviđa da bilo koji element to radi, možete ga primijeniti na tijelo kako biste spriječili da se to bilo gdje dogodi:

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

noneVrijednost trebala zaustaviti pomicanje preko ruba affordance , koje je moj najbolji pogodak znači da stvari kao što je guma podvezivanja stvari da neki preglednici učiniti, posebice uređaja s touchpad pomicati.

Zadana vrijednost je auto.

Resursi

CSS modul ponašanja nadgledanja razina 1
Vijesti s web platforme

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom	Firefox	IE	Rub	Safari
65	59	11	79	Ne

Mobitel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ne

pozadina-filter
vidljivost sa stražnje strane
pozadini
pozadina-prilog
background-blend-mode
pozadina-isječak
boja pozadine
pozadinska slika
podrijetlo podrijetla
pozadinski položaj
pozadina-ponavljanje
veličina pozadine
krvariti
blok-preljev
granica
granica-granica
granični kolaps
granična slika
granica-radijus
razmak između granica
dno
kutija-ukras-prelom
kutija-sjena
dimenzioniranje kutija
provaliti

natpisna strana
znak za umetanje
boja boje karata
oblik karete
čisto
clip-path
boja
podešavanje boje
brojanje stupaca
popunjavanje stupaca
stup-jaz
stupac-pravilo
stupac-pravilo-boja
stupac-pravilo-stil
širina stupca-pravila
raspon stupa
širina stupca
stupaca
sadrže
sadržaj
kontra-prirast
kontra resetiranje
protu-set
kursor

smjer
prikaz

prazne stanice

napuniti
filtar
savijati
fleks-osnova
fleks-smjer
fleks-protok
fleks-rasti
fleksibilno skupljanje
flex-wrap
plutati
font
prikaz fonta
obitelj fontova
postavke značajke fonta
font-kerning
font-optičko-dimenzioniranje
veličina fonta
font-size-prilagoditi
font-stretch
stil fonta
sinteza fonta
font-varijanta
font-varijanta-numerički
font-weight

jaz
grid-row / grid-column
grid-template-columns / grid-template-redovi

vješanje-interpunkcija
visina
crtice

prikazivanje slika
početno slovo
inline-size
uložak
uložak-blok
umetak-blok-kraj
inset-block-start
uloženi-uvršteni
uložak-inline-end
inset-inline-start
izolacija

opravdati-sadržaj
opravdati-predmeti

lijevo
razmak slova
prekid crte
linija-stezaljka
visina crte
stil popisa

margina
margina-blok
margina-blok-kraj
margin-block-start
margina-inline
margin-inline-end
margin-inline-start
maska-isječak
maska-slika
način maske
maska-porijeklo
položaj maske
maska-ponoviti
veličina maske
max-visina
max-inline-size
maksimalna širina
min-visina
min-širina
mix-blend-mode

objekt-fit
objekt-položaj
offset-sidro
odmak-udaljenost
offset-put
pomak-okretanje
neprozirnost
narudžba
siročad
obris
obris-pomak
prelijevanje
prelijevanje-sidro
overflow-wrap
pretjerano ponašanje

Str

podmetanje
prijelom stranice
red za bojenje
perspektiva
podrijetlo iz perspektive
mjesto-predmeti
pokazivački događaji
položaj

citati

promijeniti veličinu
pravo
red-jaz

pomicanje-ponašanje
pomicanje-margina
pomicanje pomicanjem
pomicanje-uslikavanje-poravnanje
scroll-snap-stop
scroll-snap-type
traka za pomicanje
klizač-boja
klizač-oluk
širina klizača
oblik-slika-prag
margina oblika
oblik-van
govoriti
moždani udar
moždani udar-dašara
moždani udar-dashoffset
moždani udar-linecap
moždani udar-linejoin
širina hoda

veličina kartice
raspored stolova
poravnanje teksta
text-align-last
tekst-kombiniraj-uspravno
tekst-ukras
tekst-ukras-boja
tekst-ukras-crta
tekst-ukras-preskočiti
tekst-ukras-preskoči-tinta
tekst-ukras-stil
tekst-ukras-debljina
uvlaka teksta
tekst-opravdati
orijentacija na tekst
prelijevanje teksta
prikazivanje teksta
tekst-sjena
potez teksta
preobrazba teksta
tekst-podcrtavanje-ofset
tekst-podvlačenje-položaj
gore / dolje / lijevo / desno
dodirna akcija
transformirati
transformirati-podrijetlo
transformirati-stil
tranzicija
prijelaz-odgoda
prijelaz-trajanje
prijelaz-svojstvo
funkcija prijelaznog vremena

unicode-bidi
unicode-range
korisnik-odaberi

poravnati okomito
vidljivost

bijeli prostor
udovice
širina
će promijeniti
prekid riječi
razmak riječi
način pisanja

z-indeks
zum

Selektori

A
- ::prije poslije
- :aktivan
- : bilo koja poveznica
- Susjedni brat ili sestra
- (atribut)
B
- :prazan
C
- : provjereno
- :Trenutno
- Dijete
- Razred
D
- :zadano
- : dir ()
- :onemogućeno
- Potomak
E
- :prazan
- : omogućeno
F
- ::prvo slovo
- ::prvi red
- : prvo dijete
- : prvi tip
- :usredotočenost
- : fokus-vidljiv
- : fokus-unutar
- :budućnost
G
- Opća braća i sestre
H
- :lebdjeti
Ja
- :u dometu
- : neodređeno
- : nevaljano
- :je()
- iskaznica
J
K
L
- : lang ()
- :zadnje dijete
- : posljednji tip
- :veza
M
- ::marker
- : podudaranja ()
N
- :ne()
- : n-to dijete
- : n-to-zadnje-dijete
- : n-ti-posljednji-of-type
- : n-tipa
O
- :jedino dijete
- : samo-tipa
- : neobavezno
- :izvan dometa
Str
- ::rezerviranog mjesta
- :prošlost
- : rezervirano mjesto-prikazano
P
R
- : čitanje-pisanje /: samo čitanje
- :potreban
- :korijen
S
- ::izbor
T
- :cilj
- Tip
U
- : nevažeći korisnik
- Univerzalni
V
- : vrijedi
- : posjećeno
W
x
Y
Z

Naš partner za učenje

Frontend Masters

Trebate front-end razvojni trening?

Frontend Masters je najbolje mjesto za to. Imaju tečajeve o svim najvažnijim front-end tehnologijama, od React-a do CSS-a, od Vuea do D3, i dalje s Node.jsom i Full Stackom.