在Windows Phone 8的Cordova中防止CordovaView滚动

Question

在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" />

这个bug会导致任何类型的滑动手势检测无法使用。iOS的UIScrollView控件有一个bounces属性，可以取消类似的效果。

这是Cordova的bug吗？是否可以在Cordova WebBrowser的容器上设置某些选项以防止发生此类滑动？

- Jon Gauthier

---

我遇到了同样的问题，但水平滑动仍然可行。似乎我的应用程序检测滑动手势的方式与您截图中的“水平拉动”有些不同。经过一些练习，我可以在不拉动的情况下进行滑动。 - commonpike

这对许多人有效，但对我无效：https://dev59.com/rWQo5IYBdhLWcg3wKcrH - JVE999

Answer 1

在独立模板应用程序和我正在处理的原始应用程序中，body标签上的两个额外的CSS属性解决了平移问题：

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

这个ms-content-zooming属性不会限制在元素的子元素中进行垂直滚动。

- Jon Gauthier

---

你是否遇到过这样的问题，当你将屏幕倾斜90度时，仍然发生了滚动？在这种“水平”位置上，这个技巧无法解决问题，滚动仍会发生。 - mico

我正在开发的应用程序目前不支持横屏模式。我猜我们应该避免支持它，然后.. :) - Jon Gauthier

在我的应用程序中似乎如果你抓住一个子元素并向上或向下拉，整个页面仍然会反弹，而不仅仅是可滚动区域。 - jocull

这在使用Cordova 3.6的Windows Phone 8上无法工作。 - andreszs

Answer 2

请将此代码放置在HTML文件的标签中……我已经解决了弹跳和橡皮筋效果的问题。

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

- Nitor Mobile Team

---

在使用 Cordova 3.6 开发 WP 8.1 应用时，无法防止页面过度滚动。 - andreszs

Answer 3

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

 <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>

这假设您的应用程序没有水平滚动条（混合原生样式应用程序不应该有水平滚动条）

- Adaptabi

---

你能解释一下吗？为什么-ms-指令与w3指令相反？ - commonpike

直到w3验证Microsoft正在使用-ms-前缀指令，Firefox使用-moz-，Chrome/Safari（Webkit浏览器）使用-webkit-。 - DATEx2

Answer 4

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

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

- TSV

---

这对于 Cordova 2.5+ 完美运作！ - NiRUS

在 Cordova 3.4 上运行良好 - 尽管如果您具有动量滚动并且它触及顶部/底部，仍会看到一点反弹。 - Dan

这并不是一个真正的解决方案，特别是如果你正在使用 Phonegap Build Server。 - DATEx2

对我不起作用。它禁用了所有滚动。我应该使用iScroll来管理滚动吗？ - Patrice

如果你将DisableBouncyScrolling设置为true，那么使用iScroll这样的工具几乎是不可能的。它几乎不会再滚动了。 - André Fiedler

Answer 5

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

- andreszs

---

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

Answer 6

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

- purplecabbage

---

你的建议禁用了所有手势和滚动，这不是原帖作者想要的。 - GilesDMiddleton

还有相关的CordovaView.DisableBouncyScrolling属性。 - Sergei Grebnov

这会禁用所有地方的滚动！太糟糕了！ - DATEx2

Answer 7

我们在主包装器上使用了绝对定位，这解决了我们的使用情况。

- Daniel

Answer 8

这个解决了我的PhoneGap问题：

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

- Madde