Question

Can you Please help me out, how to design the vertical scroll bar using CSS… Is there any way to customize the vertical scroll bar design using css or css3… Thanks in Advance..

Answer 1

Take a look at this website. It uses a customized scrollbar for the -webkit- based browsers. When you inspect the css file, it’s pretty clear what css is used.

@media only screen and (-webkit-min-device-pixel-ratio: 0) and (min-device-width: 1025px) {
html {  overflow: hidden; }
body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 12px;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
}

::-webkit-scrollbar-button:vertical:increment {
    background-color: #fff;
}

::-webkit-scrollbar-track-piece {
    background-color: #eee;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
}

However, http://jscrollpane.kelvinluck.com/ is the best example of cross-browser scrollbar customizer that i’ve crossed so far…