Kerige-klõpsake-joondage - CSS-trikid

Anonim

scroll-snap-alignon osa CSS Scroll Snap moodulist. Kerimise klõpsamine viitab vaateakna asukoha lukustamisele lehe konkreetsetele elementidele, kui akent (või keritavat konteinerit) keritakse. Mõelge kerimisele klõpsatavale konteinerile, näiteks panete magneti elemendi otsa, mis jääb vaateakna ülaosale ja sunnib lehe sealsamas kerimise lõpetama.

scroll-snap-alignon kerimise klõpsamise konteineri kerimis-klõpsamise elemendi nõutav omadus. Lisateavet kerimisnuppude klõpsamise kohta leiate scroll-snap-typealmanahhikirjest. scroll-snap-alignütleb brauser, mis elemendi osaks tuleks viia kui snap punkt tekkinud: Kui element asetuks start, centervõi endvanema konteinerit scroll-snap-typevara?

Kui soovite, et element klõpsataks selle elemendi alguses kohale, andke talle selline scroll-snap-alignväärtus:

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

Süntaks

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

Selle atribuudi jaoks saate määrata kuni 2 väärtust, mis tähistavad vastavalt ploki ja sisetelge. Kui annate ainult ühe väärtuse, kasutatakse seda väärtust mõlema telje jaoks.

Väärtused

scroll-snap-align aktsepteerib järgmisi väärtusi:

  • none keelab elemendi kerimise klõpsamise
  • start joondab elemendi alguse kerimismahuti snapportiga, kui see oma kohale kinnitatakse
  • end joondab elemendi otsa oma kohale klõpsates kerimismahuti snapportiga
  • center joondab elemendi keskosa kerimismahuti snapportiga, kui see oma kohale kinnitatakse

Näide

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
69 68 11 * 79 11

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 81 11.0-11.2

Seotud

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ressursid

  • CSS Scroll Snap W3C kandidaatide soovitus
  • Praktiline CSS-i kerimise napsutamine
  • Tutvustame CSS-i kerimispunkte