jquery-mobile - jQuery Mobile - 启用滚动禁用页面拖动

Question

我目前正在使用 phonegap 1.5 和 jQuery Mobile 开发 iOS 应用程序。

我知道我们可以使用以下 javascript 禁用页面拖动:

function preventBehavior(e)  
{ 
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, false);

但是，如果启用上述内容，则内容滚动将不起作用。

有什么办法可以防止用户拖动页面但允许滚动？

我试过使用 iScroll。为此，我需要手动执行

scrollbar.refresh(); 

在每个页面上的 pageinit 事件下。不幸的是，我确实有很多页面需要滚动。 =(

有没有其他方法可以在不使用 3rd 方插件的情况下启用滚动？

Answer 1

将此添加到 HTML 头

<script type="text/javascript">
    touchMove = function(event) {
        event.preventDefault();
    }
</script>

然后设置

ontouchmove="touchMove(event)"

在要禁用拖动的每个页面的最外层 div 中。例子:

<div id="mypage" ontouchmove="touchMove(event)">

对于没有 ontouchmove="touchMove(event)"的页面，可以进行拖动。

此解决方案要求您不要包含函数 preventBehavior() 的 phonegap 模板代码。删除或注释掉它:

//function preventBehavior(e) 
//{ 
//    e.preventDefault();
//};
//document.addEventListener("touchmove", preventBehavior, false);

更详细的信息在这里: http://phonegap.pbworks.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications