TL;DR
- Scroll snap forbedrer en almindelig overflow-scroller; det er ikke en ny carousel-widget.
- Sæt snap-adfærden på scrolleren og snap-positionen på hvert item.
- Controls er et supplement til direkte scrolling og må ikke være den eneste vej til indholdet.
Scroll snap er layoutadfærd
Start med en scroller, der fungerer uden snap:
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 42rem); gap: 1rem; overflow-inline: auto; overscroll-behavior-inline: contain;}Tilføj derefter snap som et ekstra lag:
.scroller { scroll-snap-type: inline mandatory; scroll-padding-inline: 1rem;}
.scroller > article { scroll-snap-align: center;}inline følger dokumentets skriveretning og er derfor mere robust end at
hardcode x. mandatory føles præcist i en testimonial-carousel, mens
proximity ofte passer bedre til løsere indholdslister.
Byg scrolleren i lag
En robust scroller bør kunne bruges med flere inputformer:
- touch og trackpad scroller direkte,
- tastaturbrugere kan nå scrolleren eller dens interaktive indhold,
- forrige/næste-knapper kan tilbydes som ekstra controls,
- og indholdet forbliver læsbart, hvis snap ikke understøttes.
Giv en fokusérbar scrollregion et tilgængeligt navn, og skjul ikke scrollbar,
medmindre der findes en tydelig alternativ affordance. scroll-behavior: smooth bør respektere brugerens motion-præference.
Test mere end det færdige snap
Kontrollér især:
- at første og sidste item kan ses helt,
- at en smal viewport ikke skaber page-overflow,
- at fokus ikke bliver klippet,
- at indhold stadig kan nås uden mus,
- og at DOM-rækkefølgen er den visuelle rækkefølge.