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.
CSS scroll snap videó
