Helper to make separate scroll boxes on iOS devices

touchScroll.js

(function(){
	var global = this; // capture global object, almost the same as window
	
	function touchScroll(wrapper,container,items,width,height){
		var box = wrapper,
			move = container,
			itens = items,
			width = width,
			height = height,
			touchOrigin = null,
			touchDelta = 0,
			currentDelta = 0;

		wrapper.addEventListener('touchstart',function(event){
			touchDelta = 0;
			touchOrigin = event.targetTouches[0].pageY;
			move.className=''; // remove any snap transition in place
		},false);

		wrapper.addEventListener('touchmove',function(event){
			event.preventDefault();
			touchDelta = event.targetTouches[0].pageY - touchOrigin;
			move.style.webkitTransform = 'translate3d(0,' + (currentDelta + touchDelta) + 'px,0)';
		},false);

		wrapper.addEventListener('touchend',function(event){
			move.className='snap';
			var direction = touchDelta>0?1:-1;
			if(Math.abs(touchDelta)>height/5) {
				currentDelta += height*direction;
				var max = height*(itens.length-1);
				if(currentDelta<-max) {
					currentDelta=-max;
				} else if(currentDelta>0){
					currentDelta=0;
				}
			}
			move.style.webkitTransform = 'translate3d(0,'+currentDelta+'px,0)';
		},false);

	};
	
	// expose 
	global.touchScroll = touchScroll;
	
})();