jQuery / HTML5 / gwt app for WP8 (Lumia 920) device: vertical css scroll fix

问题

Problem:

I try to fix this phenomenom about scrolling out of app boundaries:

(Picture source: Prevent scrolling out of CordovaView in Cordova for Windows Phone 8 )

Approach #1

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

this css snippet should fix scroll so that application is stabile when scrolling the content, which it does perfectly, but it leaves application unstable. Application hands now and then without any visible reason. Showing three different views in row freezes app.

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

Approach #2

This fixes the horizontal direction:

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

This needs java script:

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

(Source WP8 IE10 viewport issue )

Seeking for solution:

How to make case 1 not to make phone unstable or make case 2 work vertically?

回答1:

The success story was to apply the Approach #1 so, that you mark to css instead

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

and give class="wp8ScrollFix" to the main div on pages, where you don't want the pan to happen.

This is new to IE10 browsers and there can be a check

@if user.agent ie10 {

}

around the fix in css file, which applies this to ie10 only.

来源：https://stackoverflow.com/questions/15943291/jquery-html5-gwt-app-for-wp8-lumia-920-device-vertical-css-scroll-fix

标签

jquery

css

gwt

windows-phone-8

cordova