0

Problem:

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

scroll problem

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

Community
  • 1
  • 1
mico
  • 12,730
  • 12
  • 59
  • 99

1 Answers1

0

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.

mico
  • 12,730
  • 12
  • 59
  • 99