Kerimis-klõps-peatus - CSS-trikid

Anonim

scroll-snap-stopon 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-stopon valikuline omadus kerimise klõpsamise elemendi jaoks kerimise klõpsamise konteineris. Lisateavet kerimisnuppude klõpsamise kohta leiate scroll-snap-typealmanahhikirjest.

scroll-snap-stopvõimaldab teil sundida kerimise klõpsutavat konteinerit kindlale elemendile klõpsama. Oletame, et kerisite kerimisnupu sees ja andsite sellele hiiglasliku hiireratta. Tavaliselt laseb brauser teie kerimise kiirusel lennata kinnituspunktidest, kuni see asetub sirvimispunkti lähedale sellele, kus kerimine tavaliselt lõpeb. Seadistuse scroll-snap-stopabil saate brauserile öelda, et see peab enne konkreetset elementi peatuma, enne kui lubate kasutajal sellest mööduda.

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

Süntaks

scroll-snap-stop: normal | always;

Väärtused

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

  • normal on vaikeväärtus ja võimaldab elemendil mööda sirvida, ilma et see klõpsataks
  • always sunnib brauserit selle elemendi külge haarama, isegi kui kerimine läheb tavaliselt sellest elemendist mööda

Näide

Vaadake
CodeSenil CSS-Tricksi (@ css-tricks) näite Pliiats kerimise- klõpsamise peatamise kohta.

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

Pange tähele, et Chrome ei pruugi praegu toetada scroll-snap-stop: always;.

Seotud

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Ressursid

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