防止在适用于 Windows Phone 8 的 Cordova 中滚动出 CordovaView答案

【问题标题】：Prevent scrolling out of CordovaView in Cordova for Windows Phone 8防止在适用于 Windows Phone 8 的 Cordova 中滚动出 CordovaView
【发布时间】：2013-02-14 02:50:16
【问题描述】：

在 Windows Phone 8 Cordova 应用程序中，我可以在应用程序中单击并水平拖动，然后平移/滚动到显示器的水平边缘。请参阅 Cordova Windows Phone 8 独立模板应用程序：

据我所见，此模板应用程序背后的 HTML 具有适当的视口规范：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

此错误会阻止任何类型的滑动手势检测发挥作用。 iOS UIScrollView 控件有一个bounces property，它允许取消某种类似的效果。

这是 Cordova 错误吗？是否可以在 Cordova WebBrowser 的容器上放置一些设置以使这种平移不会发生？

【问题讨论】：

我遇到了同样的问题，但水平滑动仍然是可能的。我的应用程序检测到的滑动手势与您截屏的“水平拉动”之间似乎存在细微差别。通过一些练习，我可以在不拉动的情况下滑动。
这对很多人有用，但对我不起作用：stackoverflow.com/questions/16274074/…

标签： cordova windows-phone-8 windows-phone

【解决方案1】：

body 标签上的两个额外 CSS 属性修复了独立模板应用和我正在开发的原始应用中的平移问题：

body {
  overflow: hidden;
  -ms-content-zooming: none; }

此ms-content-zooming 属性不限制作为body 元素的子元素的元素内的垂直滚动。

【讨论】：

您是否遇到过将屏幕倾斜 90 度时仍然发生平移的问题？在那个“水平”位置上，这个 hack 没有帮助，并且会发生平移。
我正在开发的应用程序目前不支持水平模式。我想我们应该避免支持它，那么.. :)
似乎在我的应用程序中，如果你抓住一个子元素并向上或向下拉动页面的其余部分仍然会反弹，而不仅仅是可滚动区域。
这不适用于带有 Cordova 3.6 的 Windows Phone 8。

【解决方案2】：

我们在主包装器上使用绝对位置，它修复了我们的用例。

【讨论】：

【解决方案3】：

body { -ms-touch-action:none; }

【讨论】：

您的建议禁用了所有手势和滚动，而不是 OP 想要的。
还有相关的 CordovaView.DisableBouncyScrolling 属性
这会禁用到处滚动！太可怕了！

【解决方案4】：

请在 HTML 的 body 标签中使用它...我已经修复了弹跳和橡皮筋效果。

 backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;

【讨论】：

不防止在 WP 8.1 和 Cordova 3.6 上过度滚动。

【解决方案5】：

您可以在 MainPage.xaml.cs 文件中添加以下代码：

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        .... // some default initialization code was here
        // and disable bouncy scrolling option:
        this.CordovaView.DisableBouncyScrolling = true;
    }

【讨论】：

这工作完美！对于科尔多瓦 2.5+
在 Cordova 3.4 上工作得很好——尽管如果你有动量滚动并且它到达顶部/底部，你仍然会看到一点反弹。
这不是一个真正的解决方案，尤其是如果您使用的是Phonegap Build Server
对我不起作用。它禁用所有滚动。我应该使用 iScroll 管理滚动吗？
如果你将DisableBouncyScrolling设置为true，几乎不可能使用像iScroll这样的东西。它几乎不再滚动了。

【解决方案6】：

这是一个真正有效的解决方案：

 <style>
    html {
        -ms-touch-action: pan-x;
        touch-action: pan-x;
    }

    body {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -ms-content-zooming: none;
    }
</style>

这假设您的应用没有水平滚动（类似原生的混合应用不应该有）

【讨论】：

你能解释一下吗？为什么 -ms- 指令与 w3 指令相反？
直到 w3 将验证 Microsoft 是否使用 -ms- 前缀指令、-moz- 用于 firefox 和 -webkit- 用于 chrome/safari（webkit 浏览器）

【解决方案7】：

正确的答案是将this.CordovaView.DisableBouncyScrolling = true; 添加到您的 MainPage.xaml.cs 文件中，但在这种情况下，您不能将其用于 Adobe Phonegap Build，因为无法提交此 xaml 文件。

【讨论】：

你是对的，除了-ms-touch-action 和其他的组合似乎确实有所作为。在我看来，这取决于您的应用程序的布局需要什么；当然，这些指令对交互性有副作用。

【解决方案8】：

这解决了我的 phonegap 问题：

if (navigator.userAgent.match(/IEMobile/))
    {
        var ieBodyHeight = $("body").outerHeight();
        var ieBodyHeightNew = ieBodyHeight - 55;
        $("head").append('<meta name="viewport" content="height=' + ieBodyHeightNew + '" />');
    }

【讨论】：