19

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?

Improve this question
2
  • I'm having the same issue, but horizontal swipes are still possible. There seems to be a slight difference between the swipe gesture the way my app detects it and the 'horizontal pull' you've screenshotted. With some practice, I can swipe without pulling.
    – commonpike
    Commented Mar 16, 2015 at 10:47
  • This worked for many people, but didn't work for me: stackoverflow.com/questions/16274074/…
    – JVE999
    Commented May 12, 2015 at 0:11

8 Answers 8

Reset to default
19

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.

Improve this answer
4
  • Have you faced a problem that the pan still happens when you tilt the screen 90 degrees? On that "horizontal" position this hack does not help and pan happens.
    – mico
    Commented Mar 20, 2013 at 11:20
  • The app I am working on doesn't support a horizontal mode at the moment. I guess we should avoid supporting it, then.. :)
    – Jon Gauthier
    Commented Mar 22, 2013 at 14:27
  • 1
    Seems in my app that if you grab a child element and pull up or down the rest of the page still bounces rather than just the scrollable area.
    – jocull
    Commented Jun 12, 2013 at 20:26
  • 1
    This does not work on Windows Phone 8 with Cordova 3.6.
    – andreszs
    Commented Feb 1, 2015 at 17:17
15

please use this in the body tag of your HTML...i have fixed the bouncing and rubber band effects.

 backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;
Improve this answer
1
  • 2
    Does not prevent overscroll on WP 8.1 with Cordova 3.6.
    – andreszs
    Commented Feb 1, 2015 at 17:20
10

This is a really working solution:

 <style>
    html {
        -ms-touch-action: pan-x;
        touch-action: pan-x;
    }

    body {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -ms-content-zooming: none;
    }
</style>

This assumes your app doesn't have horizontal scrolling (which hybrid native-like apps should not have)

Improve this answer
2
  • can you explain this a bit ? why are the -ms- directives reversed from the w3 directives ?
    – commonpike
    Commented Mar 17, 2015 at 12:58
  • until w3 will validate that Microsoft is using the -ms- prefixed directives, -moz- for firefox and -webkit- for chrome/safari (webkit browsers)
    – DATEx2
    Commented Apr 8, 2015 at 23:25
8

You can add the following code in the MainPage.xaml.cs file:

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        .... // some default initialization code was here
        // and disable bouncy scrolling option:
        this.CordovaView.DisableBouncyScrolling = true;
    }
Improve this answer
5
  • This Works perfect! for cordova 2.5+
    – NiRUS
    Commented Feb 7, 2014 at 14:16
  • Works great on Cordova 3.4 -- though if you have momentum scrolling and it hits the top/bottom, you still see a little bounce.
    – Dan
    Commented Mar 6, 2014 at 1:27
  • This is not really a solution, especially if you are using Phonegap Build Server
    – DATEx2
    Commented Mar 19, 2014 at 9:30
  • 1
    Does not work for me. It disables all scrolling. Should I manage scrolling with iScroll ?
    – Patrice
    Commented Sep 11, 2014 at 15:14
  • If you set DisableBouncyScrollingto true, it's nearly impossible to use something like iScroll. It nearly won't scroll at all anymore.
    – André Fiedler
    Commented Jun 22, 2015 at 7:26
3

The right answer is adding this.CordovaView.DisableBouncyScrolling = true; to your MainPage.xaml.cs file, but in this case, you cannot use it for Adobe Phonegap Build as this xaml file cannot be submitted.

Improve this answer
1
  • You are right, except combinations of -ms-touch-action and others do seem to make a difference. it seems to me it depends on your app's layout where what is needed; and ofcourse, these directives have side effects on interactivity.
    – commonpike
    Commented Mar 17, 2015 at 17:46
2

body { -ms-touch-action:none; }

Improve this answer
3
  • 4
    Your suggestion disables all gestures and scrolls, not what the OP wants.
    – GilesDMiddleton
    Commented Aug 14, 2013 at 17:41
  • 1
    There is also related CordovaView.DisableBouncyScrolling property
    – Sergei Grebnov
    Commented Nov 5, 2013 at 18:52
  • This disables scrolling everywhere! Terrible!
    – DATEx2
    Commented Mar 18, 2014 at 11:21
1

We used position absolute on the main wrapper and it fixed our use case.

Improve this answer
0

this solved my problem with phonegap:

if (navigator.userAgent.match(/IEMobile/))
    {
        var ieBodyHeight = $("body").outerHeight();
        var ieBodyHeightNew = ieBodyHeight - 55;
        $("head").append('<meta name="viewport" content="height=' + ieBodyHeightNew + '" />');
    }
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.