Scroll Snapping CSS beter scrollen webbrowser snap-punt

Logo cursus traing wordpress

Scroll Snapping CSS beter scrollen webbrowser snap-punt

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:

...

.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

scroll-snap-type

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


Meer weten over Scroll Snapping CSS beter scrollen webbrowser snap-puntof info?

Wil je meer informatie? Veel web-designers met interesse in Scroll Snapping CSS beter scrollen webbrowser snap-punt bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Scroll Snapping CSS beter scrollen webbrowser snap-punt?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Scroll Snapping CSS beter scrollen webbrowser snap-punt en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven