Ylikurssikäyttäytyminen - CSS-temppuja

overscroll-behaviorOmaisuus CSS säädetään, onko elementti käyttää ”selaa ketjutus” vai ei. Olet todennäköisesti kokenut tämän käyttäytymisen aiemmin ja ehkä pidit itsestäänselvyytenä, että vieritys toimii näin verkossa! Jos olet sellaisen elementin sisällä, jolla on oma vieritys (sanotaan sen olevan pystysuora) ja olet vierittänyt sen alaosaan, niin oletuksena seuraava ylätason elementti ylöspäin (ehkä itse sivu) alkaa vierittää siihen suuntaan. Jos et halua tätä oletusarvoa, overscroll-behaviorse hallitsee sitä.

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

Katso
Chris Coyierin (@chriscoyier)
kynän ylireagointikäyttäytyminen CodePenissä.

Ominaisuuden kaskadit (eli periytyvät), joten jos et pidä mitään elementtiä tekemästä sitä, voit käyttää sitä kehoon estääkseen sen tapahtumasta missään:

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

noneArvo on tarkoitus lopettaa ylivierityksen affordance , jota ei minun paras arvaus tarkoittaa, että tuollaista kumi ryhmittelyä juttuja että jotkut selaimet, erityisesti laitteita Touchpad vieritys.

Oletusarvo on auto.

Resurssit

CSS: n ylikurssikäyttäytymismoduuli, taso 1
Verkkoalustan uutiset

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
65	59	11	79	Ei

Matkapuhelin / tabletti

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ei

taustan suodatin
taustanäkyvyys
tausta
tausta-kiinnitys
tausta-sekoitustila
taustaleike
taustaväri
taustakuva
tausta-alkuperä
taustan sijainti
tausta-toisto
taustakoko
vuotaa
lohkon ylivuoto
rajalla
rajaraja
raja-romahdus
reunakuva
raja-säde
rajaväli
pohjassa
laatikko-sisustus-tauko
laatikko-varjo
laatikoiden mitoitus
murtautua sisälle

kuvateksti-puoli
caret
caret-väri
caret-muoto
asia selvä
clip-polku
väri-
värisäätö
sarakemäärä
sarake-täyttö
sarakeväli
sarake-sääntö
sarake-sääntö-väri
sarake-sääntö-tyyli
sarake-säännön leveys
sarakeväli
sarakkeen leveys
sarakkeita
sisältää
sisältö
vastakerta
laskuri
laskuri
kohdistin

suunta
näyttö

tyhjät solut

täyttää
suodattaa
joustava
joustopohjainen
joustava suunta
joustava virtaus
joustavasti kasvaa
joustava kutistuminen
joustava kääri
kellua
fontti
fontin näyttö
font-family
font-feature-settings
fontin ytiminen
fontin optinen mitoitus
Fonttikoko
font-size-adjust
font-stretch
fonttityyli
fontin synteesi
font-variantti
font-variant-numeerinen
fontin paino

aukko
ruudukko-rivi / ruudukko-sarake
ruudukko-malli-sarakkeet / ruudukko-malli-rivit

roikkuvat välimerkit
korkeus
väliviivat

Minä

kuvan renderointi
alkukirjain
inline-kokoinen
sisäosa
lisäosa
inset-block-end
inset-block-start
upotettu
inset-inline-end
inset-inline-start
eristäytyminen

perustella sisältöä
perustella-kohteet

vasemmalle
kirjainväli
rivinvaihto
linjapidike
viivankorkeus
luettelotyyli

marginaali
marginaalilohko
marginaalilohko
marginaalilohko-alku
marginaali-inline
marginaali-inline-end
marginaali-aloitus
naamio-leike
naamio-kuva
naamio-tila
naamio-alkuperä
naamioasento
naamio-toista
naamion koko
max-korkeus
max-inline-koko
max-leveys
min-korkeus
min-leveys
sekoita-sekoita-tila

esineeseen sopiva
objekti-sijainti
offset-ankkuri
offset-etäisyys
offset-polku
offset-kiertää
opasiteetti
Tilaus
orpoja
ääriviivat
ääriviiva-offset
ylivuoto
ylivuoto-ankkuri
ylivuoto
ylikurssikäyttäytyminen

pehmuste
sivunvaihto
maalausjärjestys
näkökulmasta
perspektiivi-alkuperä
paikka-esineitä
osoitintapahtumat
asentoon

lainausmerkit

muuta kokoa
oikein
riviväli

vierityskäyttäytyminen
vieritysmarginaali
vierityspehmuste
vieritä-napsauta-kohdista
vieritä-napsauta-pysäytä
vieritä-napsauta-tyyppi
vierityspalkki
vierityspalkin väri
vierityspalkkikouru
vierityspalkin leveys
muoto-kuva-kynnys
muoto-marginaali
muoto-ulkopuolella
puhua
aivohalvaus
aivohalvaus-dasharray
aivohalvaus
aivohalvaus
aivohalvausliitäntä
iskun leveys

välilehden koko
taulukon asettelu
tekstin tasaus
text-align-last
teksti-yhdistää-pystyssä
tekstikoristelu
teksti-sisustus-väri
teksti-koristelu-rivi
teksti-sisustus-ohita
teksti-sisustus-ohita-muste
tekstikoristelu-tyyli
tekstikoristelu-paksuus
teksti-luetelmakohta
perustele teksti
tekstin suunta
tekstin ylivuoto
tekstin renderointi
teksti-varjo
tekstiviiva
tekstimuunnos
text-underline-offset
text-underline-position
ylhäältä / alhaalta / vasemmalta / oikealta
kosketusnäyttö
muuttaa
muunnos-alkuperä
muunneltava
siirtyminen
siirtymäviive
siirtymän kesto
siirtymisomaisuus
siirtymäajastustoiminto

unicode-bidi
unicode-alue
käyttäjän valitsema

pystysuunnassa
näkyvyys

välilyönti
lesket
leveys
tulee muuttumaan
sananvaihto
sanavälit
kirjoitustila

z-indeksi
Zoomaus

Valitsimet

A
- ::ennen jälkeen
- : aktiivinen
- : mikä tahansa linkki
- Vieressä oleva sisar
- (attribuutti)
B
- :tyhjä
C
- : tarkastettu
- : nykyinen
- Lapsi
- Luokka
D
- : oletus
- : dir ()
- :liikuntarajoitteinen
- Jälkeläinen
E
- :tyhjä
- : käytössä
F
- ::ensimmäinen kirjain
- ::ensimmäinen linja
- :ensimmäinen lapsi
- : ensimmäisen tyyppinen
- : tarkennus
- : tarkennus näkyvissä
- : tarkennus-sisällä
- : tulevaisuus
G
- Yleinen sisarus
H
- : hiiren osoitin
Minä
- : alueella
- : määrittelemätön
- : virheellinen
- :On()
- Henkilötunnus
J
K
L
- : lang ()
- :viimeinen lapsi
- : viimeinen tyyppi
- :linkki
M
- :: merkki
- :Ottelut()
N
- :ei()
- : n. lapsi
- : n. viimeinen lapsi
- : tyypin viimeinen viimeinen
- : tyypin n
O
- :ainoa lapsi
- : vain tyypin
- :valinnainen
- : alueen ulkopuolella
P
- ::paikanpitäjä
- : ohi
- : paikkamerkki-esitetty
Q
R
- : luku-kirjoitus /: vain luku
- :edellytetään
- : juuri
S
- ::valinta
T
- :kohde
- Tyyppi
U
- : käyttäjä-virheellinen
- Yleinen
V
- :pätevä
- : vieraili
W
X
Y
Z

Oppimiskumppanimme

Frontend Masters

Tarvitsetko etupään kehityskoulutusta?

Frontend Masters on paras paikka saada se. Heillä on kursseja kaikista tärkeimmistä käyttöliittymätekniikoista, Reactista CSS: ään, Vue: sta D3: een ja pidemmälle Node.js: n ja Full Stackin avulla.