html - Change the design of a window/div scroll bar

Question

I have a div where it has an overflow attribute, everything is fine, but I want the scrollbar to look like this. not the default one, is there anyway I can implement this?

or do I have to use a css framework?

Answer 1

You can apply the same scrollbar from here. Just follow the instructions.

http://rocha.la/jQuery-slimScroll

Answer 2

Since there are no cross browser scrollbar styling availiable in css you need to use jquery libraries to do that for you.

use this library https://code.google.com/p/jscrollpane/

simply download this and attach to your project and to the div you want to style the scrollbar simply code it as this

<div class="styleme"></div>

and in your jquery

$(document).ready(function(){

    $('.styleme').jScrollPane();

});

Thats all You need to do. Hope it helps.

Answer 3

you can use jquery tinyscrollbar plugin

http://baijs.nl/tinyscrollbar/

in Javascript

$('#scrollbar1').tinyscrollbar();