Brielle
Brielle
2015. dec 31

A következő tutorialban a görgetősáv CSS-el való formázásáról lesz szó. Ha unod már a megszokott görgetősávot, esetleg fel szeretnéd az oldalad dobni valamivel, akkor ez tökéletes módszer arra, hogy izgalmasabbá tedd az oldalad.  A következőkben az is bemutatásra kerül, mit kell tenned, hogy az oldaladon megjelenő összes görgetősávra (például a chatére is) hasson a kód, valamint hogy csak a fő, oldalsó sáv változzon át.

CSS kód

A következő CSS-t kell beillesztened a saját CSS stíluskészleted közé. Ez a kód hatni fog az oldaladon található összes görgetősávra. Ez például akkor hasznos, ha van chated, így a kód arra is hatni fog.

::-webkit-scrollbar {
width: 15px; /*görgetősáv szélessége*/
}

::-webkit-scrollbar-track { /*görgetősáv színe*/
background-color: #fff;
}

::-webkit-scrollbar-thumb { /*görgő kinézete*/
background-color: #9b6f7a;
border: solid 3px #ffffff;
}

Ha azt szeretnéd, hogy csak a fő görgetősávodra hasson a kód, akkor be kell illesztened a body taget mindegyik CSS meghatározás elé.

body::-webkit-scrollbar {
width: 15px; /*görgetősáv szélessége*/
}

body::-webkit-scrollbar-track { /*görgetősáv színe*/
background-color: #fff;
}

body::-webkit-scrollbar-thumb { /*görgő kinézete*/
background-color: #9b6f7a;
border: solid 3px #ffffff;
}

Háttér beillesztése

Ha nem színt szeretnél megadni a görgetősávod hátterének, hanem egy komplett képet, akkor a következőt kell beillesztened a kódba:

background: url(http://képedurlje.png);
bacgkround-position: center top;


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *