Preveliko vedenje - CSS-triki

overscroll-behaviorHotel v nadzoru CSS, ali bo element uporabili "za pomikanje verižni" ali ne. Verjetno ste že vedeli s tem vedenjem in ste si morda menili, da takšno drsenje deluje v spletu! Če ste znotraj elementa, ki ima lastno drsenje (recimo, da je navpično), in ste se pomaknili navzdol do dna, potem se privzeto začne v tej smeri pomikati naslednji nadrejeni element navzgor (morda sama stran). Če tega ne želite, overscroll-behaviorga nadzoruje.

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

Oglejte si
vedenje pisala Chris Coyier (@chriscoyier)
na CodePen.

Lastnost se kaskadira (tj. Podeduje se), tako da, če vam ni všeč kateri koli element, lahko to uporabite na telesu, da preprečite, da bi se kje zgodilo:

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

noneVrednost naj bi ustaviti drsenje čez rob affordance , ki moja najboljša ugibati pomeni, da stvari, kot je ta iz gume pasovi stvari, da nekateri brskalniki storiti, zlasti naprav z touchpad drsenje.

Privzeta vrednost je auto.

Viri

Modul vedenja CSS nadgledanja 1. stopnja
Novice o spletni platformi

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome	Firefox	IE	Rob	Safari
65	59	11.	79	Ne

Mobilni / tablični računalnik

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ne

kulisa-filter
vidnost v ozadju
ozadje
ozadje-priloga
način mešanja ozadja
posnetek za ozadje
Barva ozadja
slika ozadja
izvor-izvor
položaj ozadja
ozadje-ponovitev
velikost ozadja
krvavijo
blok-preliv
meja
meja-meja
mejni kolaps
border-image
meja-polmer
razmik med mejami
spodaj
škatla-dekoracija-odmor
škatla-senca
velikost škatle
vlom

na strani z napisi
caret
kareta-barva
obliki karete
jasno
clip-path
barva
prilagoditev barve
števec stolpcev
stolpec-izpolni
vrzel v stolpcu
pravilo stolpca
stolpec-pravilo-barva
slog-stolpec-pravilo
širina stolpca-pravila
razpon stolpca
širina stolpca
stolpci
vsebujejo
vsebino
nasprotni prirastek
nasprotna ponastavitev
kontra-set
kazalec

smer
zaslon

prazne celice

napolnite
filter
fleks
fleksibilna osnova
smer upogibanja
fleks-tok
fleks-rasti
fleksibilno skrči
upogibanje
float
pisave
prikaz pisave
družina pisav
nastavitve pisave
jedro pisave
velikost pisave
velikost pisave
font-size-prilagodite
font-stretch
slog pisave
sinteza pisav
varianta pisave
font-variant-numeric
teža pisave

vrzel
grid-row / grid-column
grid-predloga-stolpci / mreža-predloga-vrstice

vešanje-ločila
višina
vezaji

jaz

upodabljanje slik
začetnica
inline-size
vložek
vstavni blok
inset-block-end
inset-block-start
vstavljen-inline
inset-inline-end
inset-inline-start
izolacija

upraviči vsebino
upravičiti-postavke

levo
razmik med črkami
prelom vrstice
linijska objemka
višina vrstice
seznam-slog

marža
margin-block
margin-block-end
margin-block-start
marža-inline
marža-inline-end
margin-inline-start
maska-posnetek
maska-slika
način maske
maska-izvor
položaj maske
maska-ponovitev
velikost maske
največja višina
max-inline-size
največja širina
min-višina
najmanjša širina
mix-blend-mode

objekt-fit
objekt-položaj
offset-sidro
odmična razdalja
offset-pot
offset-rotate
motnost
naročilo
sirote
oris
oris-odmik
prelivanje
prelivno sidro
overflow-wrap
preveliko vedenje

oblazinjenje
prelom strani
naročilo barve
perspektiva
izvor-perspektiva
kraj-predmeti
kazalni dogodki
položaj

Vprašanje

narekovaji

spremenite velikost
prav
vrzel-vrzel

drsenje
drsni rob
drsnik
scroll-snap-align
scroll-snap-stop
scroll-snap-type
drsnik
drsna barva
drsni žleb
drsna širina
prag oblike-slike
rob-rob
oblika-zunaj
govoriti
možganska kap
kap-dasharray
kap-dashoffset
kap-linecap
kap-linejoin
širina udarca

velikost zavihka
postavitev tabele
poravnava besedila
text-align-last
besedilo-kombiniraj-pokonci
okrasitev besedila
besedilo-dekoracija-barva
besedilo-dekoracija-vrstica
besedilo-dekoracija-preskoči
besedilo-dekoracija-preskoči-črnilo
Besedilo-dekoracija-slog
besedilo-dekoracija-debelina
zamik besedila
besedilo-utemelji
usmerjenost na besedilo
prelivanje besedila
upodabljanje besedila
besedilo-senca
poteza besedila
preoblikovanje besedila
besedilo-podčrtaj-odmik
besedilo-podčrtaj-položaj
zgoraj / spodaj / levo / desno
akcija na dotik
preoblikovati
transformiraj-izvor
preoblikovalni slog
prehod
prehod-zamuda
trajanje prehoda
prehodna lastnost
prehodno-časovna funkcija

unicode-bidi
unicode-range
uporabnik-izberite

navpična poravnava
vidljivost

presledek
vdove
premer
se bo spremenil
prelom besed
razmik med besedami
način pisanja

z-indeks
povečava

Selektorji

A
- ::prej potem
- : aktivno
- : katera koli povezava
- Sosednji brat ali sestra
- (atribut)
B
- : prazno
C
- : preverjeno
- : trenutno
- Otrok
- Razred
D
- : privzeto
- : dir ()
- :onemogočeno
- Potomak
E
- :prazno
- : omogočeno
F
- :: prva črka
- ::prva vrsta
- : prvi otrok
- : prvovrstni
- : fokus
- : ostrina vidna
- : fokus znotraj
- : prihodnost
G
- Splošni brat ali sestra
H
- : hover
jaz
- : v dosegu
- : nedoločen
- : neveljavno
- : is ()
- ID
J
K
L
- : lang ()
- : zadnji otrok
- : zadnji tip
- : povezava
M
- :: marker
- : se ujema ()
N
- : ne ()
- : n-ti otrok
- : nth-zadnji-otrok
- : nth-last-of-type
- : nth-of-type
O
- : edini otrok
- : samo-tip
- :neobvezno
- :izven dosega
P
- ::rezervirano mesto
- : preteklost
- : prikazan nadomestni znak
Vprašanje
R
- : branje-pisanje /: samo branje
- : obvezno
- : root
S
- :: izbor
T
- : tarča
- Tip
U
- : uporabnik neveljaven
- Univerzalni
V
- : veljavno
- : obiskal
W
X
Y.
Z

Naš učni partner

Frontend Masters

Potrebujete razvojno usposabljanje?

Frontend Masters je najboljše mesto za to. Imajo tečaje o vseh najpomembnejših front-end tehnologijah, od React-a do CSS-a, od Vueja do D3 in še več z Node.js in Full Stackom.