-ms-viewport Causing Div Not Scrolling

I seem to have encountered a very strange bug; I am doing an app for Windows Phone 8 with PhoneGap. The problem I am having is that that I have scrollable div which works when I us

Solution 1:

For Windows Phone 8

I faced the same issue and I was breaking my head until I used the following CSS:

body {
    @-ms-viewport {
        width: 320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

div.scrollable-area {
    overflow: scroll;
    -ms-overflow-style: none;
}

It worked; now I am able to scroll the area with no problem.

---

For Windows Phone 8.1 +

As pointed by this link which is a working solution

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

body {  
   -ms-touch-action: pan-y ;  
}

div.scrollable-area {  
  overflow: auto ;  
  -ms-touch-action: pan-y ;  
}

Credits to :

Tweet@r_desimone

Solution 2:

The @ms-viewport rule according to MSDN doesn't support the setting of properties other than width or height.

So you may have to use a combination of the meta tag and the @ms-viewport rule, but just override the width and height each time using media queries for the different layouts

Solution 3:

body, html { 
  -ms-overflow-style: none !important; 
}