Page 1 of 1

Simple Custom Scrollbar with jQuery

Posted: Tue Jan 13, 2009 10:14 pm
by daedalus__
I became frustrated with my current website project and thought I would do something a little fun.

Since IE stopped being the standard browser I've always been annoyed with the way scrollbars are ugly. They are an eyesore. I always thought it would be awful nifty if there were an easy way to do away with the default scrollbars, even going as far as using images to blend with a graphic heavy site layout.

So, I went ahead and put together this snippet as a proof of concept. I'm not going to call this usable, pretty or even good, but it was fun. I plan to improve this. To make the slider work and the track clickable, in addition to cleaning it up and making it a little more usable. I saw some plug-ins and other examples while I was searching with Google but I needed a break.

This could be improved a great deal. I started using jQuery only this Sunday. jQuery.scrollTo is used in this snippet and it can be found here.

Code: Select all

 
$(document).ready(function() {  
    $.windowheight = $(window).height();
 
    //set-up the scrollbar
    $.barwidth = 25;
    $.buttonheight = 30;
    $.trackheight = $.windowheight - ($.buttonheight * 2);
    $.windowtodocr = (Math.round(($(window).height() / $(document).height() * 100) * 10) / 10);
    $("div#scrollbar div#up").css({width: $.barwidth,
                                    height: $.buttonheight});
    $("div#scrollbar div#down").css({width: $.barwidth,
                                    height: $.buttonheight});
    $("div#scrollbar div#track").css({width: $.barwidthheight,
                                    height: $.trackheight});
    
    // we're only going to display the scrollbar if the document
    // is larger than the window
    if ($(document).height() > $(window).height())
    {
        $.sliderheight = ($.trackheight * ($.windowtodocr * .01));
        $("div#scrollbar div#slider").css({height: $.sliderheight + 'px', position: 'relative'});
        $("div#scrollbar").css({height: $.windowheight, display: 'block', position: 'fixed'});
    }
    
    $(window).scroll(function(){
        $.sliderpercentage = Math.round(((($(document).scrollTop() / ($(document).height()-$(window).height())) * 100) * 10) / 10);
        $.sliderposition = Math.round((($.trackheight-$.sliderheight) * ($.sliderpercentage * 0.01)));
        $("div#scrollbar div#track div#slider").css({top: $.sliderposition + 'px'});
    });
    
    //assign functionality
    $("div#scrollbar div#up").click(function(){
        $.tenpercent = ($(document).height() * 0.1);
        $(window).scrollTo('-=' + $.tenpercent + 'px',0);
    }).mousedown(function(){
        $(this).css({background: '#666666'});
    }).mouseup(function(){
        $(this).css({background: '#999999'});
    });
    
    $("div#scrollbar div#down").click(function(){
        $.tenpercent = ($(document).height() * 0.1);
        $(window).scrollTo('+=' + $.tenpercent + 'px',0);
    }).mousedown(function(){
        $(this).css({background: '#666666'});
    }).mouseup(function(){
        $(this).css({background: '#999999'});
    });
});
 

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <title>easy custom scrollbar</title>
    <link href="css/screen.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.scrollto.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
    <div id="pageContainer">
        <div id="messages"></div>
        <div id="scrollbar">
            <div id="up">u</div>
            <div id="track">
                <div id="slider">&nbsp;</div>
            </div>
            <div id="down">d</div>
        </div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hihihihihihihihihihi
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hi we're at the bottom now
    </div>
</body>
</html>
 

Code: Select all

 
body
{
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
div#scrollbar
{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
 
div#scrollbar div#up { background-color: #999999; text-align: center; vertical-align: middle; }
div#scrollbar div#track { background-color: #666666; }
div#scrollbar div#track div#slider {    background-color: #999999; }
div#scrollbar div#down { background-color: #999999; text-align: center; vertical-align: middle; }
 
 

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Jan 13, 2009 10:45 pm
by s.dot
JQuery's scrollTo() method is niiiiiiiiice. I've used it on countless occasions. I seem to have trouble with it though when the DOM is manipulated on pages with lots of information.

Contrary to your statement, I think your code looks pretty good. ;)

Can we see a working demo?

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Jan 13, 2009 10:51 pm
by daedalus__
What kind of trouble?

I don't have any web hosting at the moment. But it should work fine if you are able to put it together on your server.

Re: Simple Custom Scrollbar with jQuery

Posted: Wed Jan 14, 2009 10:10 am
by MrPotatoes
If you want I can give you some webserver space on my host until you find a place.

Re: Simple Custom Scrollbar with jQuery

Posted: Wed Jan 14, 2009 12:14 pm
by daedalus__
Alright, later today I'll post a link to a demo then. :D If I don't get busy I hope to have the slider working by the weekend.

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Jan 20, 2009 7:49 pm
by MrPotatoes
There, it's all working and you can do it. GO ahead and post the demo now if you still need to

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Jan 20, 2009 7:53 pm
by daedalus__
dert der der drer

http://andricvillanueva.com/daedalus/scrollbar <-- subject to change

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Jan 20, 2009 8:40 pm
by Chris Corbyn
This doesn't seem to work for me in FF3 ;)

It just doesn't scroll, even if I shrink the window and wot-not.

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Jan 20, 2009 11:37 pm
by josh
I cant grab the bar and scroll though. And when did IE stop being the standard browser? :|

Re: Simple Custom Scrollbar with jQuery

Posted: Thu Jan 22, 2009 6:39 pm
by daedalus__
im using firefox 3.0.5 on windows xp home. i know that this doesnt work in opera and doesnt render correctly in internet explorer 6. i havent tried 7 cause i dont have it. in opera i think it has something to do with the way it checks the size of the document to make it sure its bigger than the window before rendering the scrollbar. in ie6 im sure its unsupported css but i dont care enough about ie6 to fix it. i probably could with jquery

the slider (the thing that rides the track, bar, whatever) is not functional. i didnt get around to it and then i got busy with a job. im going to give it a shot this weekend.

:]

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Mar 10, 2009 1:08 pm
by crazycoders
I'm bugged, why create your own scrollbar component.

Doesn't the block model already feature the scrollbar as a native feature when setting css rules properly? I thought it did although i never actually searched for it...

Re: Simple Custom Scrollbar with jQuery

Posted: Tue Mar 10, 2009 1:53 pm
by jayshields
crazycoders wrote: Doesn't the block model already feature the scrollbar as a native feature when setting css rules properly? I thought it did although i never actually searched for it...
No, that's why he's making it. IE is the only browser (that I know of) that supports styling the scroll bar.

I kinda like this - if you sorted it out to have all the functionality of a normal scroll bar, that is.