Enscroll: Customized Scrollbar for a div Element

One issue I always encounter in web designing is when I need to re-style the default ugly scroll bars produced when you have a div that is overflowing.

Though you can actually edit the style of it via CSS, you may still worry if this will be applied on other browsers.

So for this problem, I usually prefer to use a script that change the style dynamically on load. Though, not all users enable their scripts, we can't deny that compared to those enabled ones, their amount is minimal.

Anyway, here is a plugin in JQuery that I found over the net -- Enscroll

I chose Enscroll among others since it is easy to set-up. Using it is just as simple as applying a CSS and binding the your div element to an event handler.

Here is a quick sample of how it is used:

HTML

<div id="scrollbox3">
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. 
Sed urna nibh, dapibus at egestas non, vulputate ut quam. 
Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. 
Sed lorem nisi, viverra a interdum nec, varius eu enim. 
Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. 
Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. 
Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. 
Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.
    </p>
</div>

JQuery

$('#scrollbox3').enscroll({
    showOnHover: true,
    clickTrackToScroll: false,
    verticalTrackClass: 'track3',
    verticalHandleClass: 'handle3'
});

CSS

#scrollbox3 {
    overflow: auto;
    width: 400px;
    height: 360px;
    padding: 0 5px;
    border: 1px solid #b7b7b7;
}
 
.track3 {
    width: 10px;
}
 
.handle3 {
    width: 5px;
    background: #000;
    opacity: 0.45;
    filter: alpha(opacity=45);
    border: 1px solid #555;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

Here is a demo of the said scroll bar: