Scroll-snap tipo - CSS-gudrybės

Anonim

scroll-snap-typeTurtas yra dalis CSS Pereikite Kabinti modulį. Slinkties užfiksavimas reiškia peržiūros srities „užrakinimą“ tam tikriems puslapio elementams, kai slenkamas langas (arba slenkamas konteineris). Pagalvokite apie tai, kaip uždėti magnetą ant elemento, kuris prilimpa prie peržiūros srities viršaus, ir priversti puslapį nustoti slinkti čia pat.

Tai naudinga, jei norite sustabdyti naršyklę tam tikruose puslapio taškuose. Pvz .: Vartotojas, naršantis nuotraukų galerijoje, tikriausiai nenori slinkti pusiaukelėje pro vaizdą - greičiausiai norėtų, kad slinkdamas vaizdas „užfiksuotų“ reikiamą padėtį. Slinkties užfiksavimas suteikia kūrėjams gryną CSS būdą, kaip tvarkyti šį elgesį.

scroll-snap-typeyra privaloma bet kurio slenkančio sudėtinio rodinio, prie kurio norite pridėti slinkties užfiksavimą, ypatybė. Tai atsako į tris slinkimo talpyklos klausimus:

  1. Ar sudėtiniame rodinyje naudojamas slinkties užfiksavimas?
  2. Kurioje ašyje - x (horizontali), y (vertikali), blokas ar įterptoji - turėtų būti taikomas slinkties užfiksavimas?
  3. Kaip turėtų elgtis slinkties spragtelėjimas? Ar jis priverstas 100% laiko, ar jis įsigalioja tik tada, kai vartotojas „pakankamai arti“ atsiduria užfiksuotoje padėtyje? Apie tai vėliau.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintaksė

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Vertybės

scroll-snap-type priima šias vertes:

  • none išjungia slinkties užfiksavimą.
  • x įgalina slinkimą tik pagal ašį.
  • y įjungia slinkimą tik y ašyje.
  • block įgalina slinkimą tik pagal blokinę ašį.
  • inline įgalina slinkimą tik išilgai ašies.
  • bothleidžia slinkties pritraukimo išilgai abiejų ašių (kurį galite galvoti kaip xir y, ar inlineir block.
  • mandatory yra griežtumo vertė, nurodanti naršyklei visada pereiti į momentinę padėtį, kai nevyksta slinkimas.
  • proximityyra griežtumo reikšmė, nurodanti naršyklei pereiti į momentinę padėtį, jei slinkimo veiksmas yra gana arti spragtelėjimo padėties. Jei jis nėra gana arti, naršyklė neturėtų spustelėti ir slinkimas elgsis paprastai.

Pavyzdys

Peržiūrėkite
„CSS-Tricks“ („@ css-tricks“) „Pen scroll-snap“ tipo pavyzdį „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
69 68 11 * 79 11

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 11.0-11.2

Susijęs

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ištekliai

  • CSS „Scroll Snap W3C“ kandidato rekomendacija
  • Praktinis CSS slinkties fiksavimas
  • Pristatome CSS slinkties taškus