Bir CSS sihri: -webkit-scrollbar

Ekim 2012 | Burak Sahin, Grafiker & Front-end Developer
-webkit-scrollbar {
width: 13px;
height: 13px;
}

::-webkit-scrollbar-button:vertical {
background-color: red;
border: 1px dashed blue;
}

/* Yukarı ve aşağı okları aktif */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}

/* Yukarı ve aşağı oklar pasif */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

/* En alta aşağı butonu ekle */
::-webkit-scrollbar-button:vertical:increment {
background-color: black;
border: 1px dashed blue;
}

/* En üste yukarı çık butonu ekle */
::-webkit-scrollbar-button:vertical:decrement {
background-color: purple;
border: 1px dashed blue;
}

::-webkit-scrollbar-track:vertical {
background-color: blue;
border: 1px dashed pink;
}

/* Üst yukarı ve aşağı buton */
::-webkit-scrollbar-track-piece:vertical:start {
border: 1px solid #000;
}

/* Alt Yukarı ve aşağı buton */
::-webkit-scrollbar-track-piece:vertical:end {
border: 1px dashed pink;
}

/* Yukarı ve aşağı yol */
::-webkit-scrollbar-track-piece {
background-color: green;
}

::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: yellow;
}

/* Köşe */
::-webkit-scrollbar-corner:vertical {
background-color: black;
}

/* Yeniden boyutlandır*/
::-webkit-scrollbar-resizer:vertical {
background-color: gray;
}