Beter magnetisch scrollen met Scroll Snapping in CSS

Met CSS scroll snapping kunt u de viewport vastzetten op bepaalde elementen of locaties nadat een gebruiker klaar is met scrollen. Het is geweldig voor het bouwen van interacties zoals deze:

Scroll snapping wordt gebruikt door het instellen van de scroll-snap-type eigenschap op een containerelement en de scroll-snap-align eigenschap op elementen daarin. Wanneer het containerelement wordt gescrolld, klikt het naar de kindelementen die je hebt gedefinieerd. In zijn meest elementaire vorm ziet het er zo uit:

<div class="container">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
  <p>...</p>
</div>

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

Eigenschappen van de container

Zoals met elke eigenschap is het een goed idee om vertrouwd te raken met de waarden die ze accepteren. Scroll snap eigenschappen worden toegepast op zowel parent als child elementen, met specifieke waarden voor elk. Ongeveer zoals flexbox en grid dat doen, waarbij de ouder een “flex” of “grid” container wordt. In dit geval wordt de parent een snap container, als je wilt.

scroll-snap-type “verplicht” vs. “nabijheid”

De verplichte waarde betekent dat de browser naar een snap-punt moet springen wanneer de gebruiker stopt met scrollen. De nabijheidseigenschap is minder strikt – het betekent dat de browser naar een snappoint mag springen als dat passend lijkt. Mijn ervaring is dat dit vaak gebeurt als je stopt met scrollen binnen een paar honderd pixels van een snap point.

Waarden voor snap: x y mandatory proximity

Dit zijn de eigenschappen en waarden voor de oudercontainer en hoe ze werken:

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

scroll-snap-type waarden:

scroll-snap-type aanvaardt de volgende waarden:

• none schakelt scroll-snap uit.
• x schakelt het verschuiven alleen langs de x-as in.
• y schakelt het verschuiven alleen langs de y-as in. Deze heb je het meeste nodig waarschijnlijk.
• block laat het verschuiven langs de blok-as toe.
• inline laat het verschuiven alleen langs de inline-as toe.
• beide laat het verschuiven langs beide assen toe (wat je kan zien als x en y, of inline en block.
• mandatory is een striktheidswaarde die de browser vertelt om altijd naar een snap-positie te gaan wanneer er niet gescrolld wordt. Dit is soms wat riskant om te gebruiken. Je moet deze altijd goed testen, is mijn advies. Lees gevaar scroll snap.
• proximity is een striktheidswaarde die de browser vertelt naar een snap-positie te gaan als een scroll-actie vrij dicht bij een snap-positie komt. Als het niet vrij dichtbij is, dan moet de browser niet klikken en zich normaal gedragen.

Voorbeelden van beter scrollen met Scroll Snapping

Voorbeelden van beter magnetisch scrollen met Scroll Snapping in CSS:

See the Pen Scroll-snap-type "Mandatory" vs "Proximity" by Max Kohler (@maxakohler) on CodePen.

See the Pen Vertical List by Max Kohler (@maxakohler) on CodePen.

See the Pen Horizontal, different sized images by Max Kohler (@maxakohler) on CodePen.

See the Pen Vertical Full-Screen by CSS-Tricks (@css-tricks) on CodePen.

See the Pen Example of CSS snaps not reporting Scroll Y position by Álvaro (@alvarotrigo) on CodePen.

See the Pen Snap Align – start, center, & end by web.dev (@web-dot-dev) on CodePen.

Links over scroll snap WordPress websites

https://generatepress.com/forums/topic/scroll-snap-on-mobile/#post-2063822