Simple Custom Scrollbar with jQuery
Posted: Tue Jan 13, 2009 10:14 pm
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.
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"> </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; }