Néhány éve még sok szerkesztő dolgozott azon hogy a görgetősávokat eltűntesse, mert bizonyos felbontásokban nagyon nem álltak jól. Mostanság, a reszponzivitás elterjedésének hála nem szabad eldugni a görgetősávokat, szóval ideje a CSS által nyújtott lehetőségekkel megregulázni azokat!

Minden doboz szintű elemnek lehet görgetősávja, nem csak egy adott honlapnak. Definiálhatsz egy dobozt és hozzá görgetősávot ha szeretnél. Fontos odafigyelni arra hogy a görgetősáv egy olyan dolog amit a böngésző olykor kénye kedve szerint átformálhat, jó példa erre egy Edge vagy egy IE, de a Firefox jónéhány verziója is.

Főbb részei:

Tulajdonságaik:

::-webkit-scrollbar, szélességet avagy width értéket adhatsz meg neki

::-webkit-scrollbar-track, színt (backgrond) vagy éppen háttérképet adhatsz meg neki a background: url("") segítségével. Kereteket is írhatsz neki a border és outline segítségével.

::-webkit-scrollbar-thumb, színt, árnyékot (box-shadow) a formáját is változtathatod a border-radius-sal.

Használata:

Ha a példákban bemutatott formákban írod fel CSS-ben akkor az az oldalon található összes görgetősávra érvényes lesz. Viszont lehetőséged van külön-külön elemekre is felírni ha más-más görgetősávokat szeretnél.

Például adott egy "doboz" ID-val jelölt elem, akkor a következőképpen formázhatod csak annak a görgetősávját:

Persze ha csak az oldal fő görgetősávját szeretnéd fomrázni a body-ra írd fel a kódot!