Probeer elke waarde van scroll-snap-type, scroll-snap-align en scroll-snap-stop in een live scroller, en kopieer daarna een carrousel in alleen CSS en paginavullende secties die toegankelijk blijven.
Scroll snap zorgt ervoor dat een scrollend vak tot stilstand komt op gekozen kinderen in plaats van op een willekeurige plek. Zet scroll-snap-type: x mandatory (of y, of proximity) op de scrollcontainer, en daarna scroll-snap-align: start, center of end op elk kind. Voeg scroll-padding toe voor vaste headers en scroll-snap-stop: always om bij elk item te stoppen.
Scroll snap-eigenschappen in één oogopslag
Voor scroll snap had u vroeger een carrouselbibliotheek nodig. Vandaag geven een paar regels CSS u veegbare kaarten, een galerij met pagina's of schermvullende secties, waarbij de browser momentum scrollen en toetsenbordondersteuning afhandelt. Gebruik de speeltuin om het verschil tussen elke waarde te voelen voordat u code kopieert.
Met mandatory komt de container altijd tot rust op een snappositie zodra het scrollen stopt. Met proximity snapt hij alleen als het scrollen dicht bij zo'n positie eindigt, zodat mensen vrij zijn om ertussenin te lezen. proximity is de standaard als u alleen de as schrijft.
De gebruikelijke oorzaken: scroll-snap-type staat op de kinderen in plaats van op de scrollende ouder, de ouder loopt niet echt over (stel overflow-x: auto en een vaste grootte in), of de kinderen hebben geen scroll-snap-align. Voor snapping op paginaniveau is de container html, niet body.
Stel scroll-padding-top op de scrollcontainer in op de hoogte van de header, bijvoorbeeld html { scroll-padding-top: 64px; }. Gesnapte secties en ankersprongen stoppen dan onder de header in plaats van eronder te verdwijnen.
Ja, voor vegen en scrollen: een flex-rij met overflow-x: auto en x mandatory snapping is een werkende carrousel. Stipindicatoren die de huidige slide tonen, automatisch afspelen en doorlopend herhalen hebben nog wel wat script nodig.
scroll-snap-type is sinds 2022 Baseline breed beschikbaar in Chrome, Edge, Firefox en Safari, en scroll-snap-stop sinds juli 2022. U kunt het zonder terugvaloptie gebruiken; browsers zonder ondersteuning scrollen gewoon vrij.
Veeg, scrol zijwaarts of klik erin en gebruik de pijltoetsen. Elke kaart is 80 procent breed, dus de volgende is aan de rand te zien.
Snapping staat op html, de scroller van de pagina. scroll-padding-top houdt secties vrij van een header van 64px, en proximity voorkomt dat lange secties lezers vastzetten.
De browser rondt de beweging af op het dichtstbijzijnde snappunt, dus scrollen met de breedte van één kaart komt precies op de volgende kaart uit.
Scroll snap-speeltuin
As
Strengheid
Uitlijning van slides
Stoppen bij elke slide
Scroll snap-voorbeeld, scrol of gebruik de pijltoetsen
Slide {n}
CSS kopiëren
Gratis beginnen · Geen creditcard nodig