customScrollBar

Revamped custom scroll bar plugin Copyright Laust Deleuran, licensed GNU GPL v3

by laustdeleuran

HTML

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<header>
    <h1>jQuery Custom Scrollbar Plugin - Revamped</h1>
</header>
<section>
    <section class="default">
        <h1>Default</h1>
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
        <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed...

CSS

/*=RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}ol,ul { list-style:none;}caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0;} section, article, header, footer, nav, aside, hgroup, video { display:block; }
 
/*=LAYOUT*/
html {
    overflow-y:scroll;
    height: 100%;
}
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:62.5%;
    height: 100%;
    background-color:#1f1f1f;
    background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.1, #1f1f1f), color-stop(0.9, #333));
    background-image:-moz-linear-gradient(center bottom, #1f1f1f 10%, #333 90%);
    background-repeat: no-repeat;
    color:#fff;
    padding:1em;
}
/*=HEADER*/
h1 {
    font-family:'Lobster', Arial, Helvetica, Verdana, sans-serif;
    font-size:2.4em;
    margin:0.5em 0 0 1em;
}
/*=CONTENT*/
section section {
    font-size:1.2em;
    padding:1em;
    margin:1em;
    border-top:1px dashed #666;
    border-bottom:1px dashed #666;
    overflow:auto;
}
section h1 {
    font-size:1.5em;
    margin:0 0 0.5em 0;
}
section p {
    margin-bottom:0.5em;
}
section p:nth-child(3n) {
    color:#aaa;
}
section p:nth-child(3n+1) {
    color:#666;
}
.default, .sized {
    float:left;
    width:40%;
    height:200px;
}
.horizontal {
    clear:both;
    width:50%;
}
.horizontal p {
    width:200%;
}
/*=FOOTER*/
footer {
    color:#666;
    margin:0 2.4em 0.5em;
}
/*=CUSTOMSCROLL*/
.cs-content { 
    padding-right:1em;
}
.cs-slider {
    display:block;
    position:absolute;
    right:2px;
    bottom:24px;
    top:24px;
    width:4px;  
    background:#0f0f0f;
    cursor:pointer;
      -moz-border-radius:2px;
    border-radius:2px;
   ...

JavaScript

/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 *
 * Version: 3.0.2
 *
 * Requires: 1.2.2+
 */
(function(b){function d(a){var f=[].slice.call(arguments,1),e=0;a=b.event.fix(a||window.event);a.type="mousewheel";if(a.wheelDelta)e=a.wheelDelta/120;if(a.detail)e=-a.detail/3;f.unshift(a,e);return b.event.handle.apply(this,f)}var c=["DOMMouseScroll","mousewheel"];b.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],d,false);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a], d,false);else this.onmousewheel=null}};b.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);
 
/*
Debounced resize() jQuery plugin
By Paul Irish
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
*/
(function(i,c){var h=function(a,g,d){var b;return function(){var e=this,f=arguments;if(b)clearTimeout(b);else d&&a.apply(e,f);b=setTimeout(function(){d||a.apply(e,f);b=null},g||100)}};jQuery.fn[c]=function(a){return a?this.bind("resize",h(a)):this.trigger(c)}})(jQuery,"smartresize");
 
/*************************************************
 **  jQuery customScrollBar version 0.1
 **  Copyright Laust Deleuran, licensed GNU GPL v3
 **  http://dev.ljd.dk/customscrollbar
 **  Inspired by http://manos.malihu.gr/jquery-custom-content-scroller
 **  Requires jQuery UI Widget Slider - http://jqueryui.com/demos/slider/
 **  Requires Paul Irish smart resize plugin -...