用于 WP8 (Lumia 920) 设备的 jQuery/HTML5/gwt 应用程序 : vertical css scroll fix

Question

问题:

我试图解决这个关于滚动出应用程序边界的现象:

(图片来源:Prevent scrolling out of CordovaView in Cordova for Windows Phone 8)

方法 #1

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

此 css 片段应修复滚动，以便应用程序在滚动内容时保持稳定，它完美地做到了这一点，但它使应用程序不稳定。没有任何明显的原因时不时地应用手。在行中显示三个不同的 View 会卡住应用程序。

(来源:Prevent scrolling out of CordovaView in Cordova for Windows Phone 8)

方法 #2

这固定了水平方向:

@-ms-viewport{width:device-width}

这需要java脚本:

 if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(
        document.createTextNode(
        "@-ms-viewport{width:auto!important}"
    )
 );

(来源 WP8 IE10 viewport issue)

寻求解决方案:

如何让case 1不让手机不稳定或让case 2垂直工作？

Answer 1

成功案例是应用方法 #1，这样您就可以标记为 css

 div.wp8ScrollFix {
    -ms-touch-action: none;
 }

并将 class="wp8ScrollFix" 给页面上的主 div，您不希望平移发生的地方。

这是IE10浏览器的新功能，可以检查

@if user.agent ie10 {

}

围绕 css 文件中的修复，仅适用于 ie10。