Scroll-snap-align - CSS-tricks

Anonim

scroll-snap-aligner 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-aligner en påkrævet 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-alignfortæller browseren, som en del af et element bør tilpasses, når en snap punkt er stødt: Skal elementet snap til start, centereller endaf moderselskabet beholder, der indeholder den scroll-snap-typeejendom?

Hvis du vil have, at et element klikker på plads i starten af ​​det element, skal du give det en scroll-snap-alignværdi som sådan:

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

Syntaks

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

Du kan angive op til 2 værdier for denne egenskab, der repræsenterer henholdsvis blok- og inline-akserne. Hvis du kun angiver 1 værdi, bruges den værdi til begge akser.

Værdier

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

  • none deaktiverer rulle snapping på elementet
  • start justerer elementets start med rullebeholderens snapport, når den klikkes på plads
  • end justerer elementets ende med rullebeholderens snapport, når den klikkes på plads
  • center justerer elementets centrum med rullebeholderens snapport, når det klikkes på plads

Eksempel

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

Ressourcer

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