CSS görgetés

A görgetés a weboldalak egyik alapvető interakciós eleme. A CSS számos lehetőséget kínál arra, hogy meghatározzuk, hogyan jelenjen meg a tartalom, ha az meghaladja a kijelző vagy egy doboz méretét. Ezen felül a modern böngészők támogatják a sima görgetést is, amely jobb felhasználói élményt nyújt.

Alap görgetés kezelése

Az overflow tulajdonság segítségével szabályozhatjuk, hogy mi történjen akkor, ha a tartalom túllépi a szülő elem méreteit. Az értékek közé tartozik a visible (alapértelmezett), hidden, scroll és auto. A scroll biztosítja, hogy mindig megjelenjen a görgetősáv, míg az auto csak akkor, ha szükséges.

Ebben a példában egy fix méretű dobozt hozunk létre, amely tartalmaz elég szöveget ahhoz, hogy görgetni kelljen. Az overflow: scroll miatt a görgetősáv mindig látható lesz.

Sima görgetés

A scroll-behavior tulajdonsággal beállíthatjuk, hogy a görgetés simán történjen, amikor a felhasználó egy hivatkozásra kattint, amely az oldalon belülre mutat. Ez sokkal kellemesebb felhasználói élményt ad, különösen hosszabb oldalak esetében.

Ebben a példában egy linket helyezünk el, amely az oldal egy későbbi részére mutat. A scroll-behavior: smooth hatására a böngésző lassan, folyamatos mozgással görget a cél elemhez.

Tippek a görgetéshez

A görgetés testreszabása segíthet a jobb felhasználói élmény kialakításában, de mindig ügyelni kell a hozzáférhetőségre és a teljesítményre.

• Használj auto overflow-t, hogy a görgetősáv csak szükség esetén jelenjen meg.
• A sima görgetés javítja az élményt, de ne feledd, hogy a felhasználói beállításokat is tiszteletben kell tartani (pl. prefers-reduced-motion).
• Kerüld a túlzottan egyedi görgetési megoldásokat, mert ronthatják az oldal teljesítményét és a használhatóságot.