css scrollbar width and round effect

Question

is there a way where I can set the width of the default width of the scroll bar in a dive ? what I have is a div with auto scroll bar. what I want to set the width of the scroll bar as a thin line and hide the both top and bottom arrow marks of this.

Answer 1

You can use CSS's WebKit functionalities:

You can read about it here.

For example:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5); 
}

Would create an iOS-like scrollbar (DEMO)

Good luck

Answer 2

you should have a look at this. works awesome in every browser.

It is very easy to use and change all possible style from scroll (colors, widths and what ever you want).

http://manos.malihu.gr/jquery-custom-content-scroller/

--> direct link to demo page