iOS 5上的document.ontouchmove和滚动
iOS 5上的document.ontouchmove和滚动
提问于 2011-10-18 02:56:44
JavaScript5为iOS /Web带来了许多好东西。其中之一是改进的滚动。如果您添加了
-webkit-overflow-scroll:touch;对于文本区域元素的样式，滚动只需一根手指就可以很好地工作。
但是有一个问题。为了防止整个屏幕滚动，建议web应用程序添加以下代码行：
document.ontouchmove = function(e) {e.preventDefault()};然而，这会禁用新的滚动。
有没有人有一个很好的方法来允许新的滚动在一个文本区域内，而不是允许整个表单滚动？
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-10-18 05:05:44
更新 Per Alvaro's comment，从iOS 11.3开始，此解决方案可能不再有效。
您应该能够通过选择是否调用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();
};编辑对于以后阅读的任何人来说，备用答案确实有效，而且更容易。
Stack Overflow用户
发布于 2013-06-03 21:46:01
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();
});Stack Overflow用户
发布于 2012-06-01 15:31:28
对于任何试图使用PhoneGap实现此功能的用户，您可以禁用cordova.plist中的弹性滚动，将UIWebViewBounce的值设置为NO。我希望这对那些像我一样花了很长时间在这上面的人有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7798201
复制相关文章
相似问题
腾讯云开发者
