Scroll-snap-stop - CSS-tricks

Anonim

scroll-snap-stopä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-stopär en valfri egenskap för ett scroll-snapping-element i en scroll-snap-container. För mer information om rullningsfästande behållare se scroll-snap-typealmanackposten.

scroll-snap-stoplåter dig tvinga rullningsfästningsbehållaren att knäppa till ett visst element. Antag att du rullade inuti en behållare för rullning-snäppning, och att du gav den ett gigantiskt snurrhjul. Normalt låter webbläsaren hastigheten på din rullning flyga förbi snäpppunkter tills den ligger på en snäpppunkt nära det där rullningen normalt slutar. Genom att ställa in kan scroll-snap-stopdu berätta för webbläsaren att den måste stoppas på ett visst element innan användaren kan passera den.

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

Syntax

scroll-snap-stop: normal | always;

Värden

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

  • normal är standardvärdet och gör att ett element kan rullas förbi utan att snappa
  • always tvingar webbläsaren att knäppa till det här elementet, även om rullningen normalt skulle gå förbi detta element

Exempel

Se exemplet med rullning-snäpp-stopp för penna
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

Observera att Chrome kanske inte stöder just scroll-snap-stop: always;nu.

Relaterad

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

Resurser

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