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; }