Mérei Tamás webdesigner
Helló!Mérei Tamás vagyok, webdesigner

Weboldalak és felhasználói felületek tervezésével és kódolásával foglalkozom. Dolgozom magánszemélyeknek, vállalkozásoknak, fejlesztő cégeknek és reklámügynökségeknek.

CSS scroll snap

A CSS scroll snap segítségével snap point-okat hozhatunk létre a scroll konténeren belül. A görgetés során ezeknél a pontoknál fog megállni a scrollbar.

A két legfontosabb CSS property amit meg kell tanulnunk a scroll-snap-type és a scroll-snap-align. A scroll-snap-type fogja magát a scroll snap funkciót aktiválni a konténer elemen, a scroll-snap-align pedig azt a pozíciót határozza meg ahova az adott blokknak igazodnia kell a görgetés során.

A scroll-snap-type értéke lehet x, y vagy both, attól függően, hogy milyen irányban szeretnénk az effektet alkalmazni. Both esetén mindkét irányban érvényes lesz. A mandatory és proximity értékkel pedig a scroll effekt érzékenységét tudjuk állítani. Mandatory esetén a legkisebb görgetés hatására is egy egész blokkot fog ugrani a scrollbar, míg proximity esetén a böngésző számításai alapján számolódik az effekt.

A scroll-snap-stop egy harmadik beállítás ami csak mobileszközökön működik és két értéket vehet fel. Ha az always beállítást használjuk, akkor bármilyen sebességgel húzzuk meg a képernyőt, mindenképpen meg fog állni a scrollbar a következő elemnél. Ha a normal értéket adjuk meg, akkor a hagyományos módon fog működni a scroll, tehát addig tart a görgetés ameddig a lendület.

A videóban elkészített mintát az alábbi gombra kattinva tudod megnézni.

forráskód

CSS scroll snap videó

CSS scroll snap videó