Wat is CSS Scroll Snap Generator?
CSS scroll-snap bepaalt de scrollpositie van een container zodat deze vastklikt op uitlijnpunten die u definieert. Het maakt carrousels, horizontale galerijen en sectie-voor-sectie scrollen mogelijk zonder JavaScript. De browser handelt de snap-fysica af, waardoor het soepel werkt op trackpad, muiswiel en aanraakapparaten.
Snel antwoord
Genereer CSS scroll-snap-regels voor carrousels, galerijen en sectiegebaseerde lay-outs. Kies richting, snap-type en uitlijning om te bepalen hoe de scrollpositie vastklikt op elk onderliggend element.
Last updated: 2026-06-11
Beperkingen
- Mandatory snap-type kan snel scrollen door lange inhoud voorkomen omdat de scrollpositie naar elk kind snapt, waardoor snel browsen stijf aanvoelt.
- Scroll-snap vereist dat de container overflow heeft ingesteld op scroll of auto. Containers met overflow: hidden activeren geen scroll-snap-gedrag.
- Scroll-snapping kan conflicteren met prefers-reduced-motion gebruikersvoorkeuren. Gebruikers die verminderde beweging hebben aangevraagd, kunnen geforceerde snap-punten desori锟絥terend vinden. Wikkel snap-gedrag in een @media (prefers-reduced-motion: no-preference)-blok om toegankelijkheidsinstellingen te respecteren.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Selecteer de scrollrichting: horizontaal voor carrousels en galerijen, verticaal voor sectie-voor-sectie pagina's.
- Kies het snap-type: mandatory klikt altijd vast op het dichtstbijzijnde punt, proximity klikt alleen vast wanneer de scroll dicht bij een snap-punt is.
- Kies de uitlijning: start lijnt het kind uit aan het begin van de container, center centreert het, end lijnt uit aan het einde.
- Kopieer de gegenereerde CSS en HTML-skelet en vervang vervolgens de tijdelijke kind-inhoud door uw eigen.
Waarvoor je het kunt gebruiken
- Een horizontale afbeeldingsgalerij bouwen die bij elke afbeelding vastklikt bij scrollen of vegen.
- Een volledige-pagina landingssite maken waarbij elke sectie bij scrollen in beeld klikt.
- Een JavaScript-carrousel vervangen door een lichtgewicht CSS-only scroll-snap-component.