Drsenje-snap-stop - CSS-triki

Anonim

scroll-snap-stopje del modula za pomikanje po pomika CSS. Hitro drsenje se nanaša na "zaklepanje" položaja vidnega polja na določene elemente na strani, ko se pomika okno (ali pomični vsebnik). Zamislite si vsebnik za pomikanje, kot da bi magnet postavili na element, ki se drži vrha vidnega polja in prisilil stran, da se tam neha pomikati.

scroll-snap-stopje neobvezna lastnost elementa za pomikanje v pomičnem vsebniku. Za več informacij o pomičnih posodah glejte scroll-snap-typevnos almanaha.

scroll-snap-stopvam omogoča, da prisilno pomikanje vsebnika zaskoči na določen element. Recimo, da ste se pomikali znotraj posode za drsenje in mu dali ogromno kolesce z vrtenjem miške. Običajno brskalnik pusti, da hitrost vašega drsenja leti mimo točk zaskočitve, dokler se ne ustavi na točki snap blizu mesta, kjer se drsenje običajno konča. Z nastavitvijo scroll-snap-stoplahko brskalniku sporočite, da se mora ustaviti na določenem elementu, preden uporabniku dovoli, da mimo njega.

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

Sintaksa

scroll-snap-stop: normal | always;

Vrednote

scroll-snap-stop sprejema naslednje vrednosti:

  • normal je privzeta vrednost in omogoča, da se element pomakne mimo, ne da bi se zaskočil
  • always bo brskalnik prisilil, da se pripne na ta element, tudi če bi drsnik običajno šel mimo tega elementa

Primer

Glej primer Pen scroll-snap-stop
z CSS-Tricks (@ css-tricks) na CodePen.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
69 68 11 * 79 11.

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 81 11,0-11,2

Upoštevajte, da Chrome scroll-snap-stop: always;trenutno morda ne podpira .

Sorodno

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

Viri

  • Priporočilo kandidata za pomikanje po CSS W3C
  • Praktično CSS Scroll Snapping
  • Predstavljamo točke pomikanja CSS