Document.ontouchmove and scrolling on iOS 5

Question

iOS 5 brought a lot of nice stuff to JavaScript / Web Apps. One of them is improved scrolling. If you add

-webkit-overflow-scroll:touch; 

in the style of the textarea element, scrolling will work with one finger.

But there's a problem. To prevent the entire screen from scrolling, it is recommended that web applications add this line of code:

 document.ontouchmove = function(e) {e.preventDefault()}; 

This, however, disables the new scroll.

Does anyone have a good way to allow new scrolling in a text box but not allow scrolling of the entire form?

Answer 1

Update According to Alvaro's comment , this solution may no longer work with iOS 11.3.

You should be able to enable scrolling by choosing whether or not to cause default prevention. For example,

 document.ontouchmove = function(e) { var target = e.currentTarget; while(target) { if(checkIfElementShouldScroll(target)) return; target = target.parentNode; } e.preventDefault(); }; 

Alternatively, this may work if the event does not reach the document level.

 elementYouWantToScroll.ontouchmove = function(e) { e.stopPropagation(); }; 

Edit For those who read later, an alternative answer works and is much easier.

Answer 2

The only problem with Brian Nickel's answer is that (as indicated by user 1012566) stopPropagation doesn't stop you from bubbling when you click your scrollable borders. You can prevent this with the following:

 elem.addEventListener('touchstart', function(event){ this.allowUp = (this.scrollTop > 0); this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight); this.prevTop = null; this.prevBot = null; this.lastY = event.pageY; }); elem.addEventListener('touchmove', function(event){ var up = (event.pageY > this.lastY), down = !up; this.lastY = event.pageY; if ((up && this.allowUp) || (down && this.allowDown)) event.stopPropagation(); else event.preventDefault(); }); 

Answer 3

For those who are trying to achieve this using PhoneGap, you can disable scrolling in cordova.plist mode, set the UIWebViewBounce parameter to NO , and set the UIWebViewBounce parameter. Hope this helps anyone who has spent time on this (like me).

Answer 4

ScrollFix seems like the perfect solution. I tested it and it works like a charm!

https://github.com/joelambert/ScrollFix

 /** * ScrollFix v0.1 * http://www.joelambert.co.uk * * Copyright 2011, Joe Lambert. * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ var ScrollFix = function(elem) { // Variables to track inputs var startY, startTopScroll; elem = elem || document.querySelector(elem); // If there is no element, then do nothing if(!elem) return; // Handle the start of interactions elem.addEventListener('touchstart', function(event){ startY = event.touches[0].pageY; startTopScroll = elem.scrollTop; if(startTopScroll <= 0) elem.scrollTop = 1; if(startTopScroll + elem.offsetHeight >= elem.scrollHeight) elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1; }, false); }; 

Answer 5

It was unpleasant to find a known problem with stopPropagation and scrolling of the native div. This doesn't seem to interfere with the onTouchMove stream, so when scrolling outside the div (top to top or bottom to bottom) the whole page will bounce.

More discussion here and here .