Prevent scrolling out of CordovaView in Cordova for Windows Phone 8

Jon Gauthier picture Jon Gauthier · Feb 28, 2013 · Viewed 15.1k times · Source

In a Windows Phone 8 Cordova application I'm able to click and drag horizontally in the app and pan/scroll past the horizontal edge of the display. See the Cordova Windows Phone 8 standalone template application:

Panning horizontally past the edge of the Cordova app

The HTML behind this template application has a proper viewport specification, as far as I can see:

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

This bug prevents any kind of swipe gesture detection from being useful. The iOS UIScrollView control has a bounces property that allows a somewhat similar effect to be canceled.

Is this a Cordova bug? Is there some setting that can be placed on the container of the Cordova WebBrowser such that this panning can't happen?

Answer

Jon Gauthier picture Jon Gauthier · Feb 28, 2013

Two extra CSS properties on the body tag fixed the panning problem in both the standalone template app and in the original app I was working on:

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

This ms-content-zooming property does not restrict vertical scrolling within elements that are children of the body element.