Custom Scrollbar

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery custom scrollbar demo</title>
    <!-- stylesheet for demo and examples -->
    <style type="text/css">
    <!--
        body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
        a:link,a:visited,a:hover{color:#fff;}
        h1{font-family:Georgia,serif; font-size:19px; font-style:italic; margin:20px 40px 0 40px; color:#09C;}
        p{margin:0 0 20px 0;}
        hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.2); border-top:1px solid rgba(0,0,0,0.9); margin:20px 10px; clear:both;}
        .links{margin:10px 0 0 10px;}
        .links a{display:inline-block; padding:2px 10px; margin:10px; background:#C30; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
        .links a:hover{background:#de4816;}
        .content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333;}
        .content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
        .content p:nth-child(3n+0){color:#c96;}
    -->
    </style>
</head>
<body>
    <div class="links">
        <a href="http://manos.malihu.gr/jquery-custom-content-scroller">Plugin home</a>
    </div>
    <hr />
    <div class="wrapper">
        <h1>Scrollbar with default option parameters</h1>
        <!-- content block -->
         <div id="content_1" class="content">
            <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
               <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse...

CSS

/* basic scrollbar styling */
/* vertical scrollbar */
.mCSB_container{
    width:auto;
    margin-right:30px;
    overflow:hidden;
}
.mCSB_container.mCS_no_scrollbar{
    margin-right:0;
}
.mCustomScrollBox .mCSB_scrollTools{
    width:4px;
    height:100%;
    top:0;
    right:0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer{
    padding-bottom:40px;
}
.mCSB_scrollTools .mCSB_draggerRail{
    width:20px;
    height:100%;
    margin:0 auto;
}
.mCSB_scrollTools .mCSB_dragger{
    cursor:pointer;
    width:100%;
    height:30px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width:20px;
    height:100%;
    margin:0 auto;
    text-align:center;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
    height:20px;
    overflow:hidden;
    margin:0 auto;
    cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
    bottom:0;
    margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal .mCSB_container{
    height:auto;
    margin-right:0;
    margin-bottom:30px;
    overflow:hidden;
}
.mCSB_horizontal .mCSB_container.mCS_no_scrollbar{
    margin-bottom:0;
}
.mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools{
    width:100%;
    height:16px;
    top:auto;
    right:auto;
    bottom:0;
    left:0;
    overflow:hidden;
}
.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer{
    height:100%;
    width:auto;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow:hidden;
}
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer{
    padding-bottom:0;
    padding-right:20px;
}
.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail{
    width:100%;
    height:2px;
    margin:7px 0;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.mCSB_horizontal .mCSB_scrollTools...

JavaScript

/* 
== malihu jquery custom scrollbars plugin == 
version: 2.1 
author: malihu (http://manos.malihu.gr) 
plugin home: http://manos.malihu.gr/jquery-custom-content-scroller 
*/
(function($){
    var methods={
        init:function(options){
            var defaults={ 
                set_width:false, /*optional element width: boolean, pixels, percentage*/
                set_height:false, /*optional element height: boolean, pixels, percentage*/
                horizontalScroll:false, /*scroll horizontally: boolean*/
                scrollInertia:550, /*scrolling inertia: integer (milliseconds)*/
                scrollEasing:"easeOutCirc", /*scrolling easing: string*/
                mouseWheel:"auto", /*mousewheel support and velocity: boolean, "auto", integer*/
                autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
                scrollButtons:{ /*scroll buttons*/
                    enable:false, /*scroll buttons support: boolean*/
                    scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
                    scrollSpeed:20, /*scroll buttons continuous scrolling speed: integer*/
                    scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
                },
                advanced:{
                    updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
                    updateOnContentResize:false, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
                    autoExpandHorizontalScroll:false /*auto-expand width for horizontal scrolling: boolean*/
                },
                callbacks:{
                    onScroll:function(){}, /*user custom callback function on scroll event*/
                    onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
                    onTotalScrollOffset:0 /*scroll end reached...