Scroll-snap-type - CSS-tricks

Anonim

Den scroll-snap-typeegenskapen är en del av CSS Scroll Snap Module. Scroll snapping hänvisar till att "låsa" positionen för visningsområdet för specifika element på sidan när fönstret (eller en rullbar behållare) rullas. Tänk på det som att sätta en magnet ovanpå ett element som håller sig till toppen av visningsområdet och tvingar sidan att sluta rulla där.

Detta är användbart om du vill stoppa webbläsaren vid specifika punkter på sidan. Till exempel: En användare som surfar i ett fotogalleri vill antagligen inte rulla halvvägs förbi en bild - de föredrar troligen att bilden “snäpps” till rätt position när de rullar. Scroll snapping ger utvecklare ett rent CSS-sätt att hantera detta beteende.

scroll-snap-typeär en obligatorisk egenskap i vilken rullningsbar behållare du vill lägga till bläddringsfäste till. Det svarar på tre frågor för en rullcontainer:

  1. Använder behållaren rullningssnäppning?
  2. På vilken axel - x (horisontell), y (vertikal), block eller inline - ska rullningsknappning tillämpas?
  3. Hur ska rullning knäppas bete sig? Tvingas den 100% av tiden, eller träder den endast i kraft när användaren kommer “tillräckligt nära” en snäppposition? Mer om detta senare.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntax

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

Värden

scroll-snap-type accepterar följande värden:

  • none inaktiverar rullning snapping.
  • x möjliggör endast rullning av snäppning längs x-axeln.
  • y gör det möjligt att bläddra snett längs y-axeln
  • block möjliggör bläddring snäppning endast längs blockaxeln.
  • inline möjliggör att bläddra snäpps bara längs inline-axeln.
  • bothgör det möjligt att bläddra längs båda axlarna (som du kan tänka på som xoch y, eller inlineoch block.
  • mandatory är ett strikt värde som säger att webbläsaren alltid ska gå till en snäppposition när det inte rullar.
  • proximityär ett stränghetsvärde som berättar webbläsaren att gå till en snäppposition om en rullningsåtgärd kommer ganska nära en snäppposition. Om det inte är ganska nära, bör webbläsaren inte snäppa och rullning kommer att fungera normalt.

Exempel

Se exemplet med rullning av snap-snap-typ
av CSS-Tricks (@ css-tricks) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
69 68 11 * 79 11

Mobil / surfplatta

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

Relaterad

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

Resurser

  • CSS Scroll Snap W3C kandidatrekommendation
  • Praktisk rullning av CSS
  • Introduktion till CSS Scroll Snap Points