Rul-snap-stop - CSS-tricks

Anonim

scroll-snap-stoper en del af CSS Scroll Snap-modulet. 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å en rulle-snappende beholder som at placere en magnet oven på et element, der klæber til toppen af ​​visningsporten og tvinger siden til at stoppe med at rulle lige der.

scroll-snap-stoper en valgfri egenskab til et rulle-snapping-element i en rulle-snap-container. For mere information om rulle-snapping containere se scroll-snap-typealmanak posten.

scroll-snap-stopgiver dig mulighed for at tvinge rulle-snapping container til at snap til et bestemt element. Antag at du rullede i en rulle-snapping container, og du gav det et kæmpe spin-of-the-mousewheel. Normalt vil browseren lade hastigheden på din rulle flyve forbi snappunkter, indtil den slog sig ned på et snappunkt tæt på, hvor rulningen normalt ville ende. Ved at indstille scroll-snap-stopkan du fortælle browseren, at den skal stoppe på et bestemt element, før brugeren går forbi det.

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

Syntaks

scroll-snap-stop: normal | always;

Værdier

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

  • normal er standardværdien og gør det muligt at rulle et element forbi uden at snappe
  • always vil tvinge browseren til at snappe til dette element, selvom rulle normalt ville gå forbi dette element

Eksempel

Se eksemplet
med rulle-snap-stop-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

Bemærk, at Chrome muligvis ikke understøtter scroll-snap-stop: always;i øjeblikket.

Relaterede

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

Ressourcer

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