Scroll-snap-align - CSS-tricks

Anonim

scroll-snap-alignä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å en rullningsfångande behållare 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.

scroll-snap-alignär en obligatorisk egenskap för ett rullningsfästeelement i en rullningsfästbehållare. För mer information om rullningsfästande behållare se scroll-snap-typealmanackposten. scroll-snap-alignberättar webbläsaren vilken del av ett element som ska justeras när en snäpppunkt påträffas: Borde elementet snäppa till start, centereller endi den överordnade behållaren som innehåller scroll-snap-typeegenskapen?

Om du vill att ett element ska snäppa på plats i början av det elementet, ge det ett scroll-snap-alignvärde som så:

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

Syntax

scroll-snap-align: ( none | start | end | center )(1,2)

Du kan ange upp till 2 värden för den här egenskapen, som representerar block respektive inline axlar. Om du bara anger 1 värde kommer det värdet att användas för båda axlarna.

Värden

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

  • none inaktiverar rullning av element på elementet
  • start justerar elementets start med rullningsbehållarens snapport när den snäpps på plats
  • end justerar elementets ände med rullningsbehållarens snapport när den snäpps på plats
  • center justerar elementets centrum med rullningsbehållarens snapport när det snäpps på plats

Exempel

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-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Resurser

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