Slinkite-spragtelėkite-sulygiuokite CSS-gudrybės

Anonim

scroll-snap-alignyra CSS „Scroll Snap“ modulio dalis. Slinkties užfiksavimas reiškia peržiūros srities „užrakinimą“ tam tikriems puslapio elementams, kai slenkamas langas (arba slenkamas konteineris). Pagalvokite apie slinkimo spragtelėjimą, pavyzdžiui, ant elemento, kuris prilimpa prie peržiūros srities viršaus ir priverčia puslapį nustoti slinkti tiesiai, ant magneto.

scroll-snap-alignyra reikalinga slinkimo elemento, esančio slinkimo spragtelėjime, ypatybė. Norėdami gauti daugiau informacijos apie slinkimo konteinerius, žr. scroll-snap-typeAlmanacho įrašą. scroll-snap-alignnurodo naršyklei, kuri elemento dalis turėtų būti suderintos, kai Snap taškas susidūrė: Jeigu elementas przystawkę į start, centerarba endpatronuojančios konteinerį, kuriame yra scroll-snap-typeturtą?

Jei norite, kad elementas užsifiksuotų jo pradžioje, suteikite jam tokią scroll-snap-alignvertę:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sintaksė

scroll-snap-align: ( none | start | end | center )(1,2)

Šiai ypatybei galite nurodyti iki 2 reikšmių, atitinkamai nurodančių blokines ir įterptąsias ašis. Jei nurodysite tik 1 vertę, ši vertė bus naudojama abiem ašims.

Vertybės

scroll-snap-align priima šias vertes:

  • none neleidžia slinkti elementui
  • start elemento pradžia sulyginama su slinkties talpyklos pridėtine sąsaja, kai ji užfiksuojama vietoje
  • end kai elementas užfiksuojamas, sulygina elemento galą su slinkties talpyklos laikikliu
  • center kai elementas užfiksuojamas vietoje, jis sulygina elemento centrą su slinkties talpyklos laikikliu

Pavyzdys

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-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ištekliai

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