Prevent scrolling out of CordovaView in Cordova for Windows Phone 8

Question

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?

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, Mar 16 '15 at 10:47
This worked for many people, but didn't work for me: http://stackoverflow.com/questions/16274074/stopping-overscroll-bounce-in-phonegap-ios — JVE999, May 12 '15 at 00:11

score 19 · Accepted Answer · answered Feb 28 '13 at 03:36

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.

answered Feb 28 '13 at 03:36

Jon Gauthier

25,202
6
63
69

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 Mar 20 '13 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 Mar 22 '13 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 Jun 12 '13 at 20:26
1

This does not work on Windows Phone 8 with Cordova 3.6. – andreszs Feb 01 '15 at 17:17

score 15 · Answer 2 · answered Jul 17 '13 at 10:58

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;

answered Jul 17 '13 at 10:58

Nitor Mobile Team

253
2
5

2

Does not prevent overscroll on WP 8.1 with Cordova 3.6. – andreszs Feb 01 '15 at 17:20

score 10 · Answer 3 · answered Mar 19 '14 at 09:31

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)

answered Mar 19 '14 at 09:31

DATEx2

3,585
1
24
26

can you explain this a bit ? why are the `-ms-` directives reversed from the w3 directives ? – commonpike Mar 17 '15 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 Apr 08 '15 at 23:25

score 8 · Answer 4 · answered Dec 31 '13 at 09:03

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;
    }

answered Dec 31 '13 at 09:03

TSV

7,538
1
29
37

This Works perfect! for cordova 2.5+ – NiRUS Feb 07 '14 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 Mar 06 '14 at 01:27
This is not really a solution, especially if you are using `Phonegap Build Server` – DATEx2 Mar 19 '14 at 09:30
1

Does not work for me. It disables all scrolling. Should I manage scrolling with iScroll ? – Patrice Sep 11 '14 at 15:14
If you set `DisableBouncyScrolling`to true, it's nearly impossible to use something like iScroll. It *nearly* won't scroll at all anymore. – André Fiedler Jun 22 '15 at 07:26

score 3 · Answer 5 · answered Feb 01 '15 at 17:23

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.

answered Feb 01 '15 at 17:23

andreszs

2,896
3
26
34

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 Mar 17 '15 at 17:46

score 2 · Answer 6 · answered Jun 11 '13 at 23:53

2

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

answered Jun 11 '13 at 23:53

purplecabbage

495
3
8

4

Your suggestion disables all gestures and scrolls, not what the OP wants. – GilesDMiddleton Aug 14 '13 at 17:41
1

There is also related CordovaView.DisableBouncyScrolling property – Sergei Grebnov Nov 05 '13 at 18:52
This disables scrolling everywhere! Terrible! – DATEx2 Mar 18 '14 at 11:21

score 1 · Answer 7 · answered Mar 26 '13 at 12:22

1

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

answered Mar 26 '13 at 12:22

Daniel

11
1

score 0 · Answer 8 · answered May 21 '15 at 19:50

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 + '" />');
    }

Prevent scrolling out of CordovaView in Cordova for Windows Phone 8

8 Answers8

Linked