Custom horizontal and vertical scrollbars at a time with jQuery
2010
A client of mine wanted to use custom scrollbars for a website. I quickly found Kelvin Luck’s jQuery plugin for modifying the browser’s scrollbar. So, jScrollPane works great for vertical scrollbars and integrates neatly with WordPress, when calling it like this from the <head> section of your WordPress site:
var $j = jQuery.noConflict();
$j(function(){
jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10});
});
However, the client also wanted the horizontal scrollbars customized…
It took me several hours to stumble upon the modification of Luck’s plugin by Threeformed, a canadian media company.
But I ran into problems integrating their plugin with WordPress’ noConflict function and had to modify all the calls to « $ », into « jQuery ». It then worked out, but I needed to be able to design it via CSS independently of the vertical scrollbars. In order to do that I added a second CSS selector, through which I was then able to design the horizontal scrollbars using other background images than for the vertical ones.
One strange thing however is that this plugin expects the element you want to add scrollbars to to be set to « float:left », otherwise it has problems calculating the initial width of the horizontal scrollbars.
You may download my modified jQuery plugins here.
I am calling the plugin the following way :
var $j = jQuery.noConflict();
var originalSizes = new Array();
$j(function(){
jQuery('.scroll-horizontal-pane').jScrollHorizontalPane({scrollbarHeight:10});
});
The corresponding CSS could look something like this :
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
outline: none;
}
.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
width: 10px;
background: url(track-vertical.jpg) repeat-y;
}
.jScrollHPaneContainer .jScrollPaneTrack {
left: 0;
bottom: 0;
right: auto;
top: auto;
width: 100%;
height: 10px;
}
.jScrollPaneDrag {
position: absolute;
background: url(cap-vertical.jpg) repeat-y;
cursor: pointer;
overflow: hidden;
}
.jScrollHPaneContainer .jScrollPaneTrack {
background: url(track-horizontal.jpg) repeat-x;
}
.jScrollHPaneContainer .jScrollPaneDrag {
background: url(cap-horizontal.jpg) repeat-x;
}