iPhone-like jQuery Scrollbar

I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed heigh开发者_如何学Pythont that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!

Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.

What are your browser requirements?

You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).

Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar

::-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);
}

IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:

scrollbar-base-color: #663366; 
scrollbar-face-color: #99CCCC; 
scrollbar-track-color: #996699; 
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF; 
scrollbar-3dlight-color: #CCCCCC; 
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;

Here is a jsFiddle with the styled scrollbars: http://jsfiddle.net/APmLZ/3/