document.ontouchmove和滚动iOS 5上

iOS 5为JavaScript / Web Apps带来了许多好玩的东西。 其中之一是改进的滚动。 如果你添加

-webkit-overflow-scroll:touch; 

以textarea元素的风格,滚动将用一根手指很好地工作。

但是有一个问题。 为了防止整个屏幕滚动,build议networking应用程序添加下面这行代码:

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

但是,这会禁用新的滚动。

有没有人有一个很好的方式来允许新的滚动在一个textarea,但不允许整个窗体滚动?

您应该能够通过select是否调用preventDefault来允许滚动。 例如,

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

或者,这可以通过防止事件达到文档级别来起作用。

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

编辑对于任何人以后阅读,替代答案确实工作,方式更容易。

Brian Nickel的答案唯一的问题是(正如user1012566所提到的)stopPropagation不会阻止冒泡,当你打你的滚动的边界。 你可以用下面的方法来防止

 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(); }); 

对于任何尝试使用PhoneGap实现此目标的人,可以禁用cordova.plist的弹性滚动,将UIWebViewBounce的值设置为NO 。 我希望能帮助任何人在这个上花费时间(就像我一样)。

ScrollFix似乎是完美的解决scheme。 我testing了它,它的function就像一个魅力!

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); }; 

发现stopPropagation和本地div滚动的已知问题令人沮丧。 它似乎并没有阻止onTouchMove冒泡,所以当滚动超出div的界限(向上或向下在底部),整个页面将会反弹。

更多的讨论在这里和这里 。