Scrollbar replacements - JavaScript/CSS Projects

Description

Scrollbars have been customisable using CSS since Internet Explorer 5 (point something) but was discarded by w3c. Now you can again theme those scrollbars by replacing them with JavaScript alternatives. These are fully themable allowing their behaviour to be determined as well as their look.

This script uses the 'jquery.corner' plugin for the lovely cross-browser rounded corners and 'jquery.drag' for more reliable drag event registering.

Warning: This script has not been extensively tested and should not be used in commercial products without first testing. You have been warned.

Demo

Without JavaScript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis malesuada libero vitae consectetur. Etiam vel nisi sit amet tellus tincidunt adipiscing. Nullam faucibus arcu at massa vulputate iaculis. Nunc purus nunc, pellentesque in iaculis at, sodales eget metus. Aliquam tempus, eros id porttitor posuere, neque orci fringilla dolor, et euismod turpis libero vel nibh. Pellentesque accumsan elementum mi, consequat ultricies orci suscipit sit amet. Curabitur ultrices, magna a blandit aliquet, velit elit congue velit, eget suscipit felis odio commodo nisl. Maecenas quis arcu nisi. Mauris vel nisi et mi pellentesque venenatis nec eget purus. Vivamus eu lectus metus, a congue metus. Ut quis magna leo, vel dictum lorem. Mauris ut leo in nulla convallis consequat. Nam vel urna adipiscing orci placerat tristique. Donec volutpat molestie rutrum. Curabitur condimentum pretium ligula, eget consectetur odio vestibulum non. Vivamus ut molestie eros. Suspendisse metus orci, tincidunt in lacinia pharetra, elementum ut tortor. Quisque auctor ultrices augue, ac aliquam lectus porttitor quis.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras sed lacus est, quis molestie eros. Nam tincidunt odio id sem condimentum non tempus odio sagittis. Donec vitae euismod leo. Vestibulum et pellentesque dolor. Sed vestibulum felis quis mi placerat aliquam. Aenean ut mattis enim. Donec aliquet vestibulum nisi, condimentum ornare metus venenatis a. Nullam sed odio a dui pretium mollis et ac arcu. Etiam dignissim mattis elit, eu facilisis tellus pharetra et. Vestibulum vel magna sapien, ac suscipit sem. Integer cursus, neque sed congue pulvinar, lectus sapien varius ipsum, eu condimentum urna dolor sit amet felis.

Praesent viverra ullamcorper molestie. Etiam a accumsan sapien. Donec faucibus vulputate dolor eu porta. Nullam luctus, massa non pharetra facilisis, neque tellus accumsan justo, eget sodales libero magna sollicitudin nisi. Nullam tortor sem, vestibulum in sagittis quis, ultricies iaculis dui. Etiam purus enim, congue id vehicula non, egestas non est. Ut consectetur, sem nec rutrum placerat, tortor eros semper turpis, sagittis posuere felis ipsum ac mauris. Donec pulvinar, odio ut fringilla dictum, lacus urna volutpat justo, a vehicula lectus tellus non nulla. Nullam feugiat risus sed tellus pulvinar placerat. Donec sem lorem, condimentum posuere vehicula sit amet, vestibulum a diam. Curabitur a nunc nunc. Aliquam egestas sem sit amet orci pretium egestas sit amet ut justo. Integer condimentum, metus et auctor blandit, ante diam placerat ligula, at semper risus turpis et lectus. Morbi tempus elementum urna, et tincidunt tortor pulvinar id.

With JavaScript

JavaScript

					$(function() {
    //replace placeholders with actual scrollbars
    var ORIG_SCROLLBAR_WIDTH = 18;
    
    $.each($(".with_js"), function() {      
        //get the original height
        var scrollArea = $(this);
        var origHeight = scrollArea.height();
        scrollArea.height("auto");
        
        //prepare the container for new scrollbar
        scrollArea.css("overflow", "hidden");
        scrollArea.css("padding-right", parseInt(scrollArea.css("padding-right")) + ORIG_SCROLLBAR_WIDTH);
        scrollArea.width(parseInt(scrollArea.width()) - ORIG_SCROLLBAR_WIDTH);
        scrollArea.append("<div class=\"v_scrollbar\"><div class=\"v_scrollbar_move\"></div></div>");
        
        //get the scrollable height
        var scrollHeight = scrollArea.innerHeight();
        scrollArea.height(origHeight);
        
        //variable declarations
        var scrollbar = scrollArea.find(".v_scrollbar");
        var mover = scrollbar.find(".v_scrollbar_move");
        var scrollerHeight = parseInt(scrollbar.outerHeight(true));
        
        //EVENTS
        scrollbar.bind("mouseover", function(e) {
            $(this).stop();
            $(this).animate({opacity:1.0},400);
        });
        
        scrollbar.bind("mouseleave", function(e) {
            if (!mover.data("dragged")) {
                $(this).stop();
                $(this).animate({opacity:0.3},400);
            }
        });
        
        mover.bind("mousedown", function(e) { 
            $(this).data("clickY", e.pageY-this.offsetTop); 
        });
        
        mover.bind("dragstart", function(e) {
            $(this).data("dragged",true);
        });
        
        mover.bind("drag", function(e) {
            var newHeight = parseInt($(this).css("top")) + parseInt(e.pageY-this.offsetTop) - parseInt($(this).data("clickY"));
            
            updatePosition(newHeight);
        });
        
        function updatePosition(newHeight) {            
            newHeight = Math.max(newHeight, 0);
            newHeight = Math.min(newHeight, parseInt(scrollbar.innerHeight())-parseInt(mover.outerHeight(true)));
 
            mover.css("top",  newHeight);
            
            var contentHeight = (newHeight/(scrollerHeight-parseInt(mover.height()))) * (scrollHeight-scrollerHeight);
            scrollbar.css("top", contentHeight);
            scrollArea.scrollTop(contentHeight);
        };
        
        mover.bind("dragend", function(e) {
            $(this).data("dragged",false);
            scrollbar.stop();
            scrollbar.animate({opacity:0.3},400);
        });
        
        scrollArea.bind("mousewheel", function(event, delta) {
            var scrollPos = mover.position().top;
            scrollPos -= delta*15;
            
            updatePosition(scrollPos);
            
            return false;
        });
        
        //START
        
        //defaults
        scrollbar.css("top", 0);
        scrollArea.css("top",  0);
        scrollArea.scrollTop(0);
        mover.css("top", 0);
        mover.height(((scrollerHeight/scrollHeight)*100) + "%");
        mover.data("dragged",false);
        
        //turn scrollbar on/off
        if (scrollerHeight>=scrollHeight) {
            scrollArea.css("padding-right", parseInt($(this).css("padding-right"))-ORIG_SCROLLBAR_WIDTH);
            scrollArea.width(parseInt($(this).width())+ORIG_SCROLLBAR_WIDTH);
            scrollbar.hide();
        }
    }); 
    
    //round off the scrollbars and scroll areas
    $(".vertical_scroll").corner("10px");
    $(".v_scrollbar").corner("20px");
    $(".v_scrollbar_move").corner("10px");
});
 
				

CSS

					.demo_box {
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px;
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    position: relative;
    white-space: normal;
}
 
.v_scrollbar {
    position: absolute;
    top: 0px;
    right: 1px;
    width: 18px;
    height: 100%;
    background-color: #EEE;
    opacity: 0.3;
}
 
.v_scrollbar_move {
    position: absolute;
    top: 0px;
    width: 10px;
    height: 20px;
    background-color: #333;
    cursor: pointer;
    margin: 4px;
}
 
.end_marker:before,
.end_marker:after {
    clear: both;
    display: inline-block;
    content: ".";
    line-height: 0px;
    height: 0px;
    visibility: hidden;
}
 
.end_marker {
    width: 100%;
    clear: both;
    float: left;
    height: 20px;
}
				

XHTML

					<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis malesuada libero vitae consectetur. Etiam vel nisi sit amet tellus 
    tincidunt adipiscing. Nullam faucibus arcu at massa vulputate iaculis. Nunc purus nunc, pellentesque in iaculis at, sodales eget metus. 
    Aliquam tempus, eros id porttitor posuere, neque orci fringilla dolor, et euismod turpis libero vel nibh. Pellentesque accumsan elementum 
    mi, consequat ultricies orci suscipit sit amet. Curabitur ultrices, magna a blandit aliquet, velit elit congue velit, eget suscipit felis 
    odio commodo nisl. Maecenas quis arcu nisi. Mauris vel nisi et mi pellentesque venenatis nec eget purus. Vivamus eu lectus metus, a congue 
    metus. Ut quis magna leo, vel dictum lorem. Mauris ut leo in nulla convallis consequat. Nam vel urna adipiscing orci placerat tristique. 
    Donec volutpat molestie rutrum. Curabitur condimentum pretium ligula, eget consectetur odio vestibulum non. Vivamus ut molestie eros. 
    Suspendisse metus orci, tincidunt in lacinia pharetra, elementum ut tortor. Quisque auctor ultrices augue, ac aliquam lectus porttitor 
    quis.
</p>
 
<p>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras sed lacus est, quis molestie eros. Nam 
    tincidunt odio id sem condimentum non tempus odio sagittis. Donec vitae euismod leo. Vestibulum et pellentesque dolor. Sed vestibulum felis 
    quis mi placerat aliquam. Aenean ut mattis enim. Donec aliquet vestibulum nisi, condimentum ornare metus venenatis a. Nullam sed odio a 
    dui pretium mollis et ac arcu. Etiam dignissim mattis elit, eu facilisis tellus pharetra et. Vestibulum vel magna sapien, ac suscipit sem. 
    Integer cursus, neque sed congue pulvinar, lectus sapien varius ipsum, eu condimentum urna dolor sit amet felis.
</p>
 
<p>
    Praesent viverra ullamcorper molestie. Etiam a accumsan sapien. Donec faucibus vulputate dolor eu porta. Nullam luctus, massa non pharetra 
    facilisis, neque tellus accumsan justo, eget sodales libero magna sollicitudin nisi. Nullam tortor sem, vestibulum in sagittis quis, 
    ultricies iaculis dui. Etiam purus enim, congue id vehicula non, egestas non est. Ut consectetur, sem nec rutrum placerat, tortor eros 
    semper turpis, sagittis posuere felis ipsum ac mauris. Donec pulvinar, odio ut fringilla dictum, lacus urna volutpat justo, a vehicula 
    lectus tellus non nulla. Nullam feugiat risus sed tellus pulvinar placerat. Donec sem lorem, condimentum posuere vehicula sit amet, 
    vestibulum a diam. Curabitur a nunc nunc. Aliquam egestas sem sit amet orci pretium egestas sit amet ut justo. Integer condimentum, metus 
    et auctor blandit, ante diam placerat ligula, at semper risus turpis et lectus. Morbi tempus elementum urna, et tincidunt tortor pulvinar 
    id. 
</p>
				