Simple Custom Scrollbar with jQuery

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Simple Custom Scrollbar with jQuery

Post 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; }
 
 
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: Simple Custom Scrollbar with jQuery

Post 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?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Simple Custom Scrollbar with jQuery

Post 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.
User avatar
MrPotatoes
Forum Regular
Posts: 617
Joined: Wed May 24, 2006 6:42 am

Re: Simple Custom Scrollbar with jQuery

Post by MrPotatoes »

If you want I can give you some webserver space on my host until you find a place.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Simple Custom Scrollbar with jQuery

Post 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.
User avatar
MrPotatoes
Forum Regular
Posts: 617
Joined: Wed May 24, 2006 6:42 am

Re: Simple Custom Scrollbar with jQuery

Post by MrPotatoes »

There, it's all working and you can do it. GO ahead and post the demo now if you still need to
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Simple Custom Scrollbar with jQuery

Post by daedalus__ »

dert der der drer

http://andricvillanueva.com/daedalus/scrollbar <-- subject to change
Last edited by daedalus__ on Thu Jan 22, 2009 6:40 pm, edited 1 time in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: Simple Custom Scrollbar with jQuery

Post 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.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Simple Custom Scrollbar with jQuery

Post by josh »

I cant grab the bar and scroll though. And when did IE stop being the standard browser? :|
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Simple Custom Scrollbar with jQuery

Post 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.

:]
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: Simple Custom Scrollbar with jQuery

Post 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...
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Simple Custom Scrollbar with jQuery

Post 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.
Post Reply