how to create a custom scroll bar?

Question

Could any one let me know the css to create a custom scroll bar which looks like the one in the image? The background should be transparent, I have placed it on a green background for now.

What have you tried? CSS-only custom scrollbars are only possible in WebKit. Also, why did you feel it necessary to post such a large image? — Andy E, Feb 15 '12 at 12:57
Possible duplicate of http://stackoverflow.com/questions/1756281/how-to-make-a-custom-scroll-bar-with-css, http://stackoverflow.com/questions/3510741/to-change-a-scroll-bar-styling. — Zeta, Feb 15 '12 at 13:02
found some link could be helpful for you : http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task — ParPar, Feb 15 '12 at 13:04

score 0 · Accepted Answer · answered Feb 15 '12 at 12:59

You can do this using the jQuery plugin jScrollPane - http://jscrollpane.kelvinluck.com/

$(function() {
   $('.scroll-pane').jScrollPane();
});

The above code with set a div with class "scroll-pane" to scroll.

You can't do with with standard CSS but with CSS3 you can:

pre::-webkit-scrollbar {  
    height: 1.5ex;  
     -webkit-border-radius: 1ex;  
    }  

pre::-webkit-scrollbar-thumb {  
    border-top: 1px solid #fff;  
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));  
       -webkit-border-radius: 1ex;  
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);  
}

NOTE: This will only work on webkit browsers.

how to create a custom scroll bar?

1 Answers1