Mootools Javascript scrollbar – ipad-friendly

Mootools Javascript scrollbar – ipad-friendly

Using Javascript is the best way to creating customised scrollbars that work on tablets...

Where possible we avoid in-page scrolling as it adds an extra level of complexity which non-savvy users may find difficult to use. Despite this, we do occasionally come across legitimate uses for in-page scrolling. The simple solution is to apply a fixed height to an DOM element such as a DIV set its overflow to scroll and voila there you have a scroller. However, if you have spent hours creating a custom design you cannot expect all the different browsers variations on scrollbars to look great with that design.

If you have found this article it is probably because you want to create a better looking scroll-bar and realised that Javascript is the best way of doing this. We could create such code from scratch but for the sake of progress it is better to use previous solutions which have kindly been shared with the development community. However as a developer I cannot leave the solutions alone, I have to tweak them to suit my needs. I would like to share with you a mootools based scrollbar originally created by solutoire (in 2008) with a few of our own modifications.

Click here to see a complete demo.

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scroll Bar</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
    <script type="text/javascript" src="mootools-more-1.4.0.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
        /*<![CDATA[*/
        .content { height: 200px; width: 400px; position: relative; float: left; padding: 10px; overflow: scroll; }
        #content,#content2 { overflow: hidden; }
        .v-scrollbar { position: relative; float: left; width: 15px; background-color: grey; opacity: 0.1; }
        .v-scrollbar div { position: absolute; background-color: black; cursor: pointer; width: 100%; height: 20px; }
        .h-scrollbar {  position: relative; height: 15px; background-color: grey; opacity: 0.1; }
        .h-scrollbar div { position: absolute; background-color: black; cursor: pointer; height: 100%; width: 20px; }
        .v-scrollbar:hover,.h-scrollbar:hover { opacity: 1; }
        .fat { width: 600px; }
        .clear { clear: both; }
        /*]]>*/
    </style>
</head>

<body>
    <h1>Scroll Bar</h1>

    <div class='content'>
        <div class='fat'>
            Long Content goes here....
        </div>
    </div>

    <div class='clear'></div>

    <h1>Vertical Scroll</h1>

    <div id='content' class='content'>
        Long Content goes here....
    </div>

    <div id='v-scrollbar' class='v-scrollbar'>
        <div id='v-handle'></div>
    </div>

    <div class='clear'></div>

    <h1>Horizontal & Vertical Scroll</h1>

    <div id='content2' class='content'>
        <div class='fat'>
            Long Content goes here....
        </div>
    </div>

    <div id='v-scrollbar2' class='v-scrollbar'>
        <div id='v-handle2'></div>
    </div>

    <div class='clear'></div>

    <div id='h-scrollbar' class='h-scrollbar'>
        <div id='h-handle'></div>
    </div>
</body>
</html>

The HTML above is relatively straightforward. The areas that we wish to scroll have the class “content”. The First “Scroll Bar” uses the traditional overflow: scroll method. Whilst “Vertical Scroll” and “Horizontal & Vertical” use overflow: hidden – as the scrolling is controlled via javascript.

Each scrollable element includes a scroll-bar holder after the element you wish to scroll. Where a horizontal scroller is required an inner div with class fat is used which has a larger width than its parent container (class=’content’).

You should notice that there are no images on the page, the scroll-bars are created with pure HTML/CSS.

The Javascript

/** 
*  function makeScrollbar(content, scrollbar [, handle, isHorizontal, ignoreMouse])
*  Function that turns HTML/CSS divs into scrollbars.
*
*  @param string content "DOM ID of container to scroll"
*  @param string scrollbar "DOM ID of scrollbar"
*  @param string handle "DOM ID of handle"
*  @param boolean isHorizontal "If true sets horizontal scrollbar properties"
*  @param boolean ignoreMouse "If true ignores mouse"
**/
function makeScrollbar(content,scrollbar,handle,isHorizontal,ignoreMouse){

	content = $(content);
	scrollbar = $(scrollbar);
	handle = $(handle);

	//Automatically set the scrollbar to correct width or height
	if(isHorizontal?(scrollbar.setStyle('width',content.getSize().x + "px")):(scrollbar.setStyle('height',content.getSize().y + "px")));

	var steps = (isHorizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y));	
	if(steps>0) {

		var slider = new Slider(scrollbar, handle, {	
			steps: steps,
			mode: (isHorizontal?'horizontal':'vertical'),
			onChange: function(step){
				// Scrolls the content element in x or y direction.
				var x = (isHorizontal?step:0);
				var y = (isHorizontal?0:step);
				content.scrollTo(x,y);
			}
		}).set(0);
		if( !(ignoreMouse) ){
			// Scroll the content element when the mousewheel is used within the 
			// content or the scrollbar element.
			$$(content, scrollbar).addEvent('mousewheel', function(e){	
				e = new Event(e).stop();
				var step = slider.step - e.wheel * 30;	
				slider.set(step);					
			});
		}
		// Stops the handle dragging process when the mouse leaves the document body.
		$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
	} else {
		//Removing scroll bar
		scrollbar.setStyle('display','none');
	}

}

window.addEvent('domready',function() {
	//Have to set horizontal and vertical scrollbars seperately
	makeScrollbar('content','v-scrollbar','v-handle');
	makeScrollbar('content2','v-scrollbar2','v-handle2');

	//Horizontal scrollbar being set
	makeScrollbar('content2','h-scrollbar','h-handle',true);
});

To create a new scroll-bar you simply use the makeScrollbar javascript method. Each scroll-bar should be invoked seperately – i.e. you cannot create a horizontal and vertical scroll-bar using the makeScrollbar function once. The code sample above has standard comments which should help you identify which variables are needed when invoking the method.

In this updated version you simply pass the ID of the DOM element you wish to scroll. The width and height and the scrollbars are updated dynamically to be the same width and height as the scrollable element. If there is no content to scroll then the scrollbars are not added.

Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
17th May, 2012

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all

Useful Links

Mootools CSS Styled Scrollbar
Making a scroll function in a page element
Mootools