Bla-snap-type - CSS-triks

Anonim

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

Dette er nyttig hvis du vil stoppe nettleseren på bestemte punkter på siden. For eksempel: En bruker som blar gjennom et fotogalleri, vil sannsynligvis ikke bla halvveis forbi et bilde - de vil sannsynligvis foretrekke å ha bildet "snap" til riktig posisjon når de ruller. Scroll snapping gir utviklere en ren-CSS måte å håndtere denne oppførselen på.

scroll-snap-typeer en obligatorisk egenskap på en hvilken som helst rullbar beholder du vil legge til rulleknipsing til. Den svarer på tre spørsmål for en rullebeholder:

  1. Bruker containeren rulleknapp?
  2. På hvilken akse - x (horisontal), y (vertikal), blokk eller inline - skal rulling snapping gjelde?
  3. Hvordan skal rulling snapping oppføre seg? Tvinges den 100% av tiden, eller trer den i kraft bare når brukeren kommer “nær nok” til en snapposisjon? Mer om dette senere.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntaks

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

Verdier

scroll-snap-type aksepterer følgende verdier:

  • none deaktiverer rulle snapping.
  • x gjør det mulig å bla bare snappe langs x-aksen.
  • y gjør det mulig å bla bare snappe langs y-aksen.
  • block gjør det mulig å bla bare snappe langs blokkaksen.
  • inline gjør det mulig å bla bare snappe langs den innebygde aksen.
  • bothgjør det mulig å bla snapping langs begge aksene (som du kan tenke på som xog y, eller inlineog block.
  • mandatory er en strenghetsverdi som forteller at nettleseren alltid skal gå til en snap-posisjon når det ikke ruller.
  • proximityer en strenghetsverdi som forteller nettleseren å gå til en snap-posisjon hvis en rullehandling kommer ganske nær en snap-posisjon. Hvis det ikke er ganske nært, bør ikke nettleseren snappe, og rulling vil oppføre seg normalt.

Eksempel

Se eksemplet
på penneskroll -snap-typen 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

I slekt

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ressurser

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