Matteo Spinelli did a terrific job writing a Javascript library that allows scrolling the content of a DIV element on iPhone and Android web browsers. The library is well documented in his site http://cubiq.org/iscroll. I don’t think that it is a must-have but I find very comfortable to implement functionality in a consistent way. Since I am a big jQuery fan I decided to wrap Matteo’s library in a very simple jQuery plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

(function($){
    $.fn.iscroll = function(options){
        if(this.data('iScrollReady') == null){
            var that = this;
            var options =  $.extend({}, options);
                options.onScrollEnd = function(){
                    that.triggerHandler('onScrollEnd', [this]);
                };
            arguments.callee.object  = new iScroll(this.get(0), options);
            // NOTE: for some reason in a complex page the plugin does not register
            // the size of the element. This will fix that in the meantime.
            setTimeout(function(scroller){
                scroller.refresh();
            }, 1000, arguments.callee.object);
            this.data('iScrollReady', true);
        }else{
            arguments.callee.object.refresh();
        }
        return arguments.callee.object;
    };
})(jQuery);

(function($){
    $.fn.iscroll = function(options){
		if(this.data('iScrollReady') == null){
			var that = this;
            var options =  $.extend({}, options);
				options.onScrollEnd = function(){
					that.triggerHandler('onScrollEnd', [this]);
				};
			arguments.callee.object  = new iScroll(this.get(0), options);
			// NOTE: for some reason in a complex page the plugin does not register
			// the size of the element. This will fix that in the meantime.
			setTimeout(function(scroller){
				scroller.refresh();
			}, 1000, arguments.callee.object);
			this.data('iScrollReady', true);
		}else{
			arguments.callee.object.refresh();
		}
		return arguments.callee.object;
	};
})(jQuery);

Basically you can use jQuery to select the content that you want to scroll and call ‘.iscroll()’ to add the behavior. If you need to overwrite the default parameters you pass an object with values that you wish to change. Here is an example of how to implement this:

1
2
3
4
5
6
7

$(function(){
    var elem = $('#content');
        elem.iscroll();
        elem.bind('onScrollEnd', function(e, iscroll){
            alert($(this).attr('id') +' - '+ iscroll);
        });
});

$(function(){
	var elem = $('#content');
		elem.iscroll();
		elem.bind('onScrollEnd', function(e, iscroll){
			alert($(this).attr('id') +' - '+ iscroll);
		});
});

Downloads

• Download iScroll Libary
• Download  the iScroll jQuery Wrapper

When you call .iscroll() the library will find the parent element and make the content scrollable. This method will also return an instance of the iScroll class. If the method is called again it will refresh the content. This is convenient in case you modify the content dynamically (iScroll allows to detech DOM changes automatically).

The library dispatches an event name onScrollEnd when the scroll action is completed. In touch screen devices this library adds momentum. This means that the content will continue moving for a short time after the touchend event. By default the version 3.7 accepts a callback function that is trigger at the end of the animation. The wrapper overwrites the parameter and triggers a jQuery event instead. This approach will allow multiple callback functions.