Transform jScrollPane into Mac OSX Lion Scroll bar

Introduction

Recently I have received a request on making Mac OSX Lion scroll bar - a minimal dark grey rounded rectangle and only show itself when the user's cursor is on the scrollable content. I think it's brilliant and clean, if you are a Mac OSX or iOS user, you will see it quite often especially in its web browser - Safari. In case you don't know, here is a screen shot:

When I got that request, the first thing that came into my mind was - I can use jScrollPane and make it behave like a Mac OSX Lion scrollbar, it's just a skinning and add hide/show on mouse hover. Simple. jScrollPane is a powerful and easy to implement javascript scroll bar plugin. Personally, I have been using it since ages ago and it's pretty stable and work in almost all modern and some legacy browsers.

I know there is a plugin called nanoScrollerJS which does exactly the same thing and probably better support on mobile, but it's always fun to modify and create your own if you have times to do so. So, here is a quick and easy tutorial on how to transform jScrollPane into Mac OSX Lion Scroll bar.

HTML

jPaneScroll is very easy to implement. First of all, you need to make sure you included all the required javascript and css files:

You need jQuery framework, jScrollPane plugin and mousewheel.js for mouse wheel support.

<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<div class="scroll-pane">
... content here ...
</div>
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<div class="scroll-pane">
... content here ...
</div>

After that, you just need a DIV with a class name so you can initialise it with jQuery in the following section.

<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<div class="scroll-pane">
... content here ...
</div>
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<div class="scroll-pane">
... content here ...
</div>

CSS

We stick with jScrollPane's default CSS but with the following changes to certain classes:

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
	/* fix IE 7,8 to work with jQuery fadeIn/Out */
	opacity:inherit;
	filter:inherit;
}

.jspDrag
{
	background: #666;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;		
	-ms-border-radius:5px;			
	-o-border-radius:5px;				
}

Javascript

We jsp-initialised jScrollPane built-in event to hide on first load. Also, we have hover event which shows and hides the vertical and horizontal scroll bars whenever you mouse over it.

$(function()
{

	var bars = '.jspHorizontalBar, .jspVerticalBar';

	$('.scroll-pane').bind('jsp-initialised', function (event, isScrollable) {
		
		//hide the scroll bar on first load
		$(this).find(bars).hide();
	
	}).jScrollPane().hover(
	
		//hide show scrollbar
		function () {
			$(this).find(bars).stop().fadeTo('fast', 0.9);
		},
		function () {
			$(this).find(bars).stop().fadeTo('fast', 0);
		}

	);				

});

Conclusion

Modifying a plugin can be extremely difficult, but in this tutorial you can see it always not the case. Sometimes you can achieve or make your own unique plugin by changing the existing plugins. So, do search around, there are so many of jQuery plugins out there and if you can't finda perfect match, look for something similar and change it yourself. :)

Hope you enjoy this little tutorial and stay tuned with us for more in the future.

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Mac
• Tutorial