防止应用拖动，但允许在 ios 中滚动内部 div 元素答案

【问题标题】：prevent app dragging but permit scroll of inner div elements in ios防止应用拖动，但允许在 ios 中滚动内部 div 元素
【发布时间】：2012-01-07 16:54:30
【问题描述】：

我有一个使用 Phonegap 适应 iOS5 的网络应用程序。除一个问题外，一切正常：

我的内部<div>s，在 Chrome 中设置为溢出时滚动，如果溢出则完美滚动，但在 iPad 上根本不滚动。

--我通过禁用 touchmove 禁用了应用程序拖动； --我已经实现了（可能是错误的？） -webkit-overflow-scrolling:touch CSS 属性，这显然是 iOS5 的新属性，如下所示：

溢出：滚动； -webkit-overflow-scrolling:touch;

似乎没有任何效果。

如果我注释掉禁用应用程序拖动（即 touchmove）的 javascript（来自 Phonegap），则滚动有效，但它会拖动并滚动整个应用程序。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css ios cordova

【解决方案1】：

这更像是一种 hack，但您可以做一些检查，看看您是否触摸了 div，并据此阻止滚动：

document.body.addEventListener('touchmove', function (e){
    if(document.elementFromPoint(e.pageX, e.pageY) !== document.getElementById('yourdiv'){
        e.preventDefault();
    }
}, false);

MDN reference

【讨论】：

非常感谢阿曼。似乎无论如何都涉及到黑客，所以我很欣赏代码。
嗨，Amaan，终于有机会尝试该代码，但无法让它在 iOS5 上运行，尽管它在逻辑上非常合理。如果您有任何其他想法，我将不胜感激。
@robertsmith 你能把整个代码贴出来吗？在JSFiddle.net 上（如果不是太长），或者在PasteBin.com 上
谢谢阿曼。我让它以稍微不同的方式工作，通过使用命名函数来禁用 touchmove，然后在我需要的每个主 div 中引用它。再次感谢您的帮助。
哦，好吧，这也是一个很好的解决方案。您可能想尝试e.touches[0].pageX 而不是e.pageX，e.pageY 也是如此。可能是这不起作用的原因

【解决方案2】：

通过使用以下代码，我能够防止拖动主应用程序/页面：

var myDiv = document.getElementById('idMyDiv');

myDiv.addEventListener('touchmove', function (e){
    e.preventDefault();
}, false);

【讨论】：