In mobile Safari on the iPhone, iPod Touch, and iPad (as well as the webkit based browser on Android phones) it's not immediately obvious how to scroll a div that has overflow:auto;
set on it. If this were a desktop browser you would see scrollbars and be able to manipulate those or even use your mouse wheel. No such concepts exist on a touch screen device!
function touchScroll(selector) { if (isTouchDevice()) { var scrollStartPosY=0; var scrollStartPosX=0; $(“body”).delegate(selector, ‘touchstart’, function(e) { scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY; scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX; }); $(“body”).delegate(selector, ‘touchmove’, function(e) { if ((this.scrollTop < this.scrollHeight-this.offsetHeight && this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) || (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5)) e.preventDefault(); if ((this.scrollLeft < this.scrollWidth-this.offsetWidth && this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) || (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5)) e.preventDefault(); this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY; this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX; }); } }