Kerimis-klõpsamise tüüp - CSS-trikid

Anonim

scroll-snap-typeVara on osa CSS Leidke Snap Module. Kerimise klõpsatus viitab vaateakna asukoha "lukustamisele" lehe konkreetsete elementide külge, kui akent (või keritavat konteinerit) keritakse. Mõelge sellele, nagu paneksite magneti elemendi otsa, mis jääb vaateakna ülaossa ja sunnib lehe sealsamas kerimise lõpetama.

See on kasulik, kui soovite brauseri teatud lehe punktides peatada. Näiteks: Kasutaja, kes sirvib fotogaleriid, ei taha ilmselt poolenisti pildist mööda kerida - tõenäoliselt eelistaks ta, et pilt keriks õiges asendis. Kerimise haaramine annab arendajatele puhta käitlemise CSS-i viisi selle käitumise käsitlemiseks.

scroll-snap-typeon mis tahes keritava konteineri nõutav atribuut, kuhu soovite lisada kerimise klõpsamise. See vastab kerimismahuti kolmele küsimusele:

  1. Kas konteiner kasutab kerimisnuppu?
  2. Millisel teljel - x (horisontaalne), y (vertikaalne), plokk või rida - peaks kasutama kerimisnuppu?
  3. Kuidas peaks kerimise klõpsamine käituma? Kas see on sunnitud 100% ajast või jõustub see alles siis, kui kasutaja jõuab klõpsatusega asendisse piisavalt lähedale? Lisateavet selle kohta hiljem.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Süntaks

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

Väärtused

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

  • none keelab kerimise klõpsamise.
  • x lubab kerimise klõpsamise ainult mööda x-telge.
  • y võimaldab kerida ainult y-teljel.
  • block lubab kerimisnupu ainult mööda plokitelge.
  • inline lubab kerimise klõpsamise ainult mööda telge.
  • bothvõimaldab sirvida mõlemat telge (mida võite mõelda kui xja y, või inlineja block.
  • mandatory on ranguse väärtus, mis käsib brauseril alati sirvimisasendisse minna, kui kerimist ei toimu.
  • proximityon ranguse väärtus, mis käsib brauseril minna snap-asendisse, kui kerimistoiming jõuab snap-asendiga üsna lähedale. Kui see pole päris lähedal, ei tohiks brauser klõpsata ja kerimine käitub normaalselt.

Näide

Vaadake
CodeSenil CSS-Tricksi (@ css-tricks) pliiatsi Kerimise- klõpsamise tüüpi näidet .

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

Ressursid

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