如何在 html5 全屏 iphone 应用程序中禁用弹跳？答案

【问题标题】：How to disable bouncing in html5 fullscreen iphone app?如何在 html5 全屏 iphone 应用程序中禁用弹跳？
【发布时间】：2012-03-10 23:47:03
【问题描述】：

我想制作 html5 全屏应用。我制作了一个页面并将其作为图标添加到我的 iphone。我添加了元标记：

 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="viewport" content="width=device-width, user-scalable=no" />

我想要实现的是：顶部的黑色状态栏（这不起作用，我不知道为什么。它仍然是默认状态栏......任何想法？）无法缩放（如在 facebook 应用程序中） - 这很好用。

现在的问题 - 即使我的应用适合屏幕，我也可以在我的 iphone 上滚动。它反弹回来，但我不想要这种行为。我想禁用它并为特定的 div (.ui-content) 启用滚动。我怎样才能做到这一点？

编辑： 状态栏现在是黑色的。一段时间后它自己改变了。之前的版本是缓存在 iphone 上还是什么？

【问题讨论】：

hakoniemi.net/labs/scrollingOffset/nonbounce.html

标签： iphone html jquery-mobile

【解决方案1】：

这将防止在整个页面上滚动

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

在您的情况下，您希望某些 div 可滚动，而有些则不能，您应该能够在事件到达文档之前捕获它

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

【讨论】：

此解决方案是否适合您？当从 safari 中运行时，这确实停止了弹跳，当在独立网页上（通过“添加到主页”链接）页面不断弹跳......
很好的尝试，大部分都有效。除非启用滚动的元素滚动到顶部或底部。那么弹跳效果还是会触发的。
虽然这可行，但我遇到了一些问题，这似乎会导致点击/单击交互（如按钮）有时会失败（大概是在触发单击时联系人有任何移动）。现在我的解决方法是，如果 e.target 是按钮、链接或输入元素，则不要调用 preventDefault。

【解决方案2】：

如果您使用 Cordova 1.7+，请打开 Cordova.plist 文件并将 UIWebViewBounce 键设置为 NO

【讨论】：

在发布多个问题的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。如果您这样做，则通常意味着问题是重复的，因此请将它们标记为：stackoverflow.com/a/12394389/419

【解决方案3】：

在这里扩展 dmanxii 的方法是我们正在做的事情。

    $("body").on("touchmove", function (event) {
        if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
            //console.log("NOT Disabled"); 
        }
        else {
            //console.log("Disabled"); 
            event.preventDefault();
        }
    });

【讨论】：

很酷，所以 .WhatEverClass 是您要确保 PreventDefault 不会触发的类