WebkitScrollbarCustomization

Custom colors

by Carlos Delgado

HTML

<div style="width:2000px; height:2500px;">
  Our Code World WebkitScrollbarCustomization !
</div>

CSS

::-webkit-scrollbar {
    width: 10px;
    border: 1px dashed blue;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #65b4f7; 
    border-radius: 5px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px #65b4f7; 
}

::-webkit-scrollbar-corner{
    border-radius:5px;
   -webkit-box-shadow: inset 0 0 6px green;
}

/* The vertical thumb*/
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: black;
}

/* The vertical thumb*/
::-webkit-scrollbar-thumb:horizontal {
    height: 50px;
    background-color: gray;
}

JavaScript

if(!~(navigator.userAgent.toLowerCase()).indexOf("webkit")){
	alert("Your browser doesn't implement webkit, you may not see the styled scrollbar");
}