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的界限(向上或向下在底部),整个页面将会反弹。
更多的讨论在这里和这里 。