Bla-snap-stopp - CSS-triks

Anonim

scroll-snap-stoper en del av CSS Scroll Snap Module. Rulling snapping refererer til å "låse" posisjonen til visningsområdet til spesifikke elementer på siden når vinduet (eller en rullbar beholder) rulles. Tenk på en rullesnekkende beholder som å sette en magnet på toppen av et element som holder seg til toppen av visningsområdet og tvinger siden til å slutte å rulle akkurat der.

scroll-snap-stoper en valgfri egenskap for et rulle-snapping element i en rulle-snapping container. For mer informasjon om rullesnippere, se scroll-snap-typealmanakkoppføringen.

scroll-snap-stoplar deg tvinge rulle-snapping beholderen til å knipse til et bestemt element. Anta at du rullet i en rullesnippende beholder, og du ga den et gigantisk rotasjon av musen. Normalt vil nettleseren la hastigheten på blaingene dine fly forbi snappunkter til den slo seg ned på et snappunkt i nærheten av der rullingen normalt ville ende. Ved å angi scroll-snap-stopkan du fortelle nettleseren at den må stoppe på et bestemt element før brukeren kan passere den.

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

Syntaks

scroll-snap-stop: normal | always;

Verdier

scroll-snap-stop aksepterer følgende verdier:

  • normal er standardverdien og lar et element rulles forbi uten å knipse
  • always vil tvinge nettleseren til å knipse til dette elementet, selv om rulle normalt vil gå forbi dette elementet

Eksempel

Se eksemplet
på rulle-snap-stop-penn av CSS-Tricks (@ css-tricks) på CodePen.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
69 68 11 * 79 11

Mobil / nettbrett

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

Merk at Chrome kanskje ikke støtter scroll-snap-stop: always;for øyeblikket.

I slekt

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

Ressurser

  • CSS Scroll Snap W3C kandidatanbefaling
  • Praktisk CSS Scroll Snapping
  • Vi presenterer CSS Scroll Snap Points