Rul-snap-type - CSS-tricks

Anonim

Den scroll-snap-typeegenskab er en del af CSS Scroll Snap modul. Scroll snapping refererer til "låsning" af visningsportens placering til bestemte elementer på siden, når vinduet (eller en rullebar container) rulles. Tænk på det som at lægge en magnet oven på et element, der holder fast i toppen af ​​visningen og tvinger siden til at stoppe med at rulle lige der.

Dette er nyttigt, hvis du vil stoppe browseren på bestemte punkter på siden. For eksempel: En bruger, der gennemser et fotogalleri, vil sandsynligvis ikke rulle halvvejs forbi et billede - de foretrækker sandsynligvis at have billedet "snap" til den rigtige position, når de ruller. Scroll snapping giver udviklere en ren-CSS måde at håndtere denne adfærd på.

scroll-snap-typeer en påkrævet egenskab på en hvilken som helst rullbar container, du vil tilføje rulle snapping til. Det besvarer tre spørgsmål til en rullebeholder:

  1. Bruger containeren rulle snapping?
  2. På hvilken akse - x (vandret), y (lodret), blok eller inline - skal rulle snapping gælde?
  3. Hvordan skal rulle snapping opføre sig? Tvinges den 100% af tiden, eller træder den kun i kraft, når brugeren kommer ”tæt nok” på en snapposition? Mere 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 )

Værdier

scroll-snap-type accepterer følgende værdier:

  • none deaktiverer rulle snapping.
  • x muliggør kun at rulle snapping langs x-aksen.
  • y muliggør kun at rulle snapping langs y-aksen.
  • block muliggør kun rulle snapping langs blokaksen.
  • inline gør det kun muligt at rulle snappe langs inline-aksen.
  • bothgør det muligt at rulle snapping langs begge akser (som du kan tænke på som xog y, eller inlineog block.
  • mandatory er en strenghedsværdi, der fortæller browseren om altid at gå til en snapposition, når der ikke sker rulle.
  • proximityer en strenghedsværdi, der fortæller browseren at gå til en snapposition, hvis en rullehandling kommer temmelig tæt på en snapposition. Hvis det ikke er ret tæt, bør browseren ikke snappe, og rulning opfører sig normalt.

Eksempel

Se eksemplet
på rulle-snap-typen af pen af CSS-Tricks (@ css-tricks) på CodePen.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
69 68 11 * 79 11

Mobil / tablet

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

Relaterede

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

Ressourcer

  • CSS Scroll Snap W3C kandidatanbefaling
  • Praktisk CSS Scroll Snapping
  • Introduktion til CSS Scroll Snap Points