LivePipe.net Scrollbar Example

<html>
<head>
<!--<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>-->
<script src="http://livepipe.net/javascripts/prototype.js" type="text/javascript"></script>
<script src="http://livepipe.net/javascripts/slider.js" type="text/javascript"></script>
<script src="http://livepipe.net/javascripts/livepipe.js" type="text/javascript"></script>
<script src="http://livepipe.net/javascripts/scrollbar.js" type="text/javascript"></script>
<script type='text/javascript'>
document.observe('dom:loaded',function(){
    var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
    $('bottomcontrol').setStyle({
        top:$('scrollbar_container').getHeight()-10+'px'
    });
    $('trackcontainer').setStyle({
        height:$('scrollbar_container').getHeight()-20+'px'
    });
    $('scroll_down').observe('click',function(event){
        scrollbar.scrollBy(-100);
        event.stop();
    });
    $('scroll_up').observe('click',function(event){
        scrollbar.scrollBy(100);
        event.stop();
    });
});
</script>
<style type="text/css">
#scrollbar_container {position:relative;width:100%;height:100%;}
#scrollbar_track {position:absolute;top:0;right:0;height:100%;width:10px;background-color:transparent;cursor:move;margin-top:12px;}
#trackcontainer {position:absolute;text-align:center;top:0;right:0;height:100%;width:10px;}
#topcontrol {position:relative;top:0px;cursor:pointer;}
#bottomcontrol {position:relative;top:100%;cursor:pointer;}
#scrollbar_handle {width:10px;background-color:#3468C7;cursor:move;-moz-border-radius: 5px;-webkit-border-radius: 5px;opacity:0.8;-moz-opacity:0.8;}
#scrollbar_content {overflow:hidden;width:100%;height:100%;}
</style>
</head>
<body>
<div style="width: 100%; margin: 0px auto; height: 100%;">
    <div id="scrollbar_container">
        <div id="trackcontainer">
            <div id="topcontrol">
                <a id="scroll_down"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My4yMreRF30AAACASURBVChTY/j//z8DMjZOO+pllH44FF2cARnYx+/nMM44fh6EQWxkxSgKTTKOFZhkHP8PwccKsCoEm5Z+7DlMIYiNbCrcRFTTME0FK0Q3DZupYIXYTUM1Fadp6KYSMA1hKgOyTxFBA1MAoUFqgAqPN8Aw0K37gTFzD4hvgNlIcgB4xeK6fu6OrgAAAABJRU5ErkJggg==" /></a></div>
            <div id="scrollbar_track">
                <div class="selected" id="scrollbar_handle" style="top: 0px; position: relative; height: 91.3743px;">
                    &nbsp;</div>

            </div>
            <div id="bottomcontrol">
                <a id="scroll_up"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My4yMreRF30AAAB/SURBVChTYzBOP94AwyYZx/Ybpx29B8Q3wGwkOQbj9GPPTTKO/8eHQWoYgDoLCCkEqWGwj9/Pgc9UkBxIDQMI4Df1WMH////B6nCaCjMNrhC3qRDTUBSiuxXZNBSFmKYiTMNQCDY14/h5EAaxYdaCFSJzQGxgrHgZpR8ORRcHAF9l4rq5ZuhjAAAAAElFTkSuQmCC" /></a></div>
        </div>
        <div class="scrolling" id="scrollbar_content">
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />foo bar<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        </div>
    </div>
</div>
</body>
</html>