CSS - Scrollbars - Khai's personal knowledge vault.

Edit History Tags Source

CSS - Scrollbars

elementSelector::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

The above code specifies the width of the scrollbar, the background of the scrollbar. A scrollbar contains track, button and thumb (https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css).

elementSelector::-webkit-scrollbar-thumb {
    background-color: #000000;
}

We use box-shadow on scrollbar-track to make it stylish and add contrast between the scrollbar and scrollbar-track.

elementSelector::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

The above code so far use the pseudo selector. There are other approach for styling scrollbar:

{ color:black;
scrollbar-face-color:#05B7FF;
scrollbar-arrow-color:#05B7FF;
scrollbar-track-color:#CBD5D7;
scrollbar-shadow-color:#05B7FF;
scrollbar-highlight-color:#05B7FF;
scrollbar-3dlight-color:#808080;
scrollbar-darkshadow-Color:#202020;
}