Tilbage til Praktiske CSS-patterns

3. semester / Tema 13C: Frontend Design

Scroll-teknikker i praksis

Brug sticky og snap som bevidste UX-patterns, og suppler med scroll-drevet feedback hvor det giver mening.

Se undervisningsslides

Relevante links

Sticky og snap er layout-værktøjer

Brug position: sticky og scroll-snap-* som bevidste mønstre, ikke som pynt.

Gode use-cases:

Sticky: husk konteksten

sticky virker kun, når containeren tillader det.

I den følgende øvelse er pointen helt enkel: først skal elementet gøres sticky, men effekten kommer kun frem, fordi containeren allerede har en begrænset højde og overflow: auto. Det er en god huskeregel: sticky handler ikke kun om selve elementet, men lige så meget om den scroll-kontekst, det bor i.

Tjek især:

Hvis sticky-elementet er et grid-item, skal man også ofte kigge på højden. Grid bruger som udgangspunkt stretch, og så kan elementet ende med at fylde hele tracket i stedet for at opføre sig som et lille stykke indhold, der kan “hænge fast”. Her hjælper det tit at sætte align-self: start eller fx height: fit-content.

Snap: styr flow

Scroll snap bruges til at styre, hvor elementer stopper under scroll. Det er især nyttigt i vandrette lister eller rækker af kort.

I denne øvelse får containeren overflow-inline: auto, så den kan scrolles vandret, display: flex, så elementerne ligger på en række, og scroll-snap-type, som aktiverer snap.

Elementerne får en fast bredde, så der er noget at scrolle i, og scroll-snap-align, som angiver elementets snap-punkt.

Oplevelsen kan derefter justeres med scroll-padding-inline, scroll-snap-align: start og scroll-snap-stop: always.

I løsningen bruges mandatory, fordi det gør mekanikken tydelig. I praksis er proximity ofte et mere fleksibelt valg.