On a recent project I had the opportunity to play around with the TinyScrollbar.js jQuery plugin, which is used to add custom scrollbars to blocks of content. The project had to play nice with both standard browsers and mobile versions, and there was a lot of modular content, so it was either have some scrolling or a lot of little pages. We went with scrolling.
Using TinyScrollbar.js is fairly simple – find the block of content to which you want to add the scrollbars, add some HTML, and make a function call. The one down side is that the extra HTML needs to be added by hand. I think that is inefficient, and contrary to the idea of separating style and content. So, I played around a little and came up with a simple function, using jQuery, to do all of the wrapping for me.
The usage is simple enough: Feed in the jQuery selector string for the element to which you wish to add scroll bars. If they are to be customized, also feed in a Javascript object containing key:value pairs, which will be fed into the method call for Tinyscrollbar.
Code follows:
<!doctype html>
<html>
<head>
<title>TinyScrollBar test</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
scrollify('#scrollbar1');
scrollify('#scrollbar2',{sizethumb:15});
});
function scrollify(element,options) { // '#element', {list:of,key:values}
$(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
$(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
$(element).tinyscrollbar(options);
}
</script>
<style type="text/css">
* {margin:0;padding:0;}
.scrollBox { width: 520px; clear: both; margin: 20px auto; }
.scrollBox .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
.scrollBox .overview { list-style: none; position: absolute; left: 0; top: 0; }
.scrollBox .thumb .end,.scrollBox .thumb { background-color: #00ff00; }
.scrollBox .scrollbar { position: relative; float: right; width: 15px; border-radius:15px;}
.scrollBox .track {
background-color: #D8EEFD;
height: 100%;
width:13px;
position: relative;
padding: 0 1px;
border-radius:15px;
-webkit-box-shadow: inset 0px 0px 5px 5px #ededed;
-moz-box-shadow: inset 0px 0px 5px 5px #ededed;
box-shadow: inset 0px 0px 5px 5px #ededed;
}
.scrollBox .thumb {
height: 20px;
width: 13px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
border-radius:15px;
-webkit-box-shadow: inset 0px 0px 5px 5px #333333;
-moz-box-shadow: inset 0px 0px 5px 5px #333333;
box-shadow: inset 0px 0px 5px 5px #333333;
}
.scrollBox .thumb .end {
overflow: hidden;
height: 15px;
width: 13px;
border-radius:15px;
position:absolute;left:0;top:0;
-webkit-box-shadow: inset 0px 0px 5px 5px #333333;
-moz-box-shadow: inset 0px 0px 5px 5px #333333;
box-shadow: inset 0px 0px 5px 5px #333333;
clip:rect(0px,13px,5px,0px);
}
.scrollBox .disable{ display: none; }
.scrollBox p {
}
</style>
</head>
<body>
<div id="scrollbar1" class="scrollBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
</div>
<div id="scrollbar2" class="scrollBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est eget lacus imperdiet ultrices. Vestibulum dictum vehicula eros, nec lobortis lorem gravida sit amet. Fusce sodales ligula a tellus tristique dictum. Phasellus at tellus odio, nec interdum arcu. Cras nec felis nec velit venenatis tempus. Morbi ornare enim sit amet nisl ultrices ac pharetra justo facilisis. Nullam suscipit, sem quis imperdiet sollicitudin, eros ligula tincidunt massa, id egestas ante nulla ut nunc. Aliquam id justo ante, in viverra nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in sem nunc, at tempus urna. In tristique scelerisque dui quis faucibus. Fusce hendrerit lacinia augue vel bibendum.</p>
</div>
</body>
</html>
And that’s all there is to it. Fairly straight forward, and works across all major browsers. Click here to see this example in action.