How to prevent UIWebViewBounce, "rubber banding"

Question

How to prevent UIWebViewBounce, "rubber banding"

Using ionicframework with Cordova CLI v3.4

I'm using the following preferences in my config.xml file(s).

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

Compiling through the CLI and XCode doesn't seem to fix anything.

I then did a search for DisallowOverscroll project wide and made sure all values were set to true

I'm still getting rubberbanding though on my view. Anyone have an idea what could be the issue?

Thanks!

cordova
ios7
uiwebview
ionic-framework

Answer 1

According to this post on ionics forums:

"It's an ionic thing, not a cordova issue.

 <ion-content
         has-bouncing="false"
         start-y="55"
         padding="true"
         has-tabs="true"
         has-header="true"
         >

Use the has-bouncing attribute to disable the bounce effect on the ion-content directive"

Just had to set the attr has-bouncing="false", I don't know why that could override the Cordova config settings though.

Answer 2

You can also do this on the HTML+JS side, provided that the HTML document is not taller than the WebView viewport (aka window.height in JS). You do this by calling preventDefault on the 'touchmove' event at the appropriate time (namely when the element and all its parents have nothing to scroll in the direction the user began moving their finger).

I will show you actual code to do it, without using jQuery ... but you'll have to implement Q.addEventListener and Q.removeEventListener yourself (or use jQuery).

function _touchScrollingHandler(event) {
    var p = event.target;
    var pos;
    var scrollable = null;
    do {
        if (!p.computedStyle) {
            continue;
        }
        var overflow = p.computedStyle().overflow;
        var hiddenHeight = p.scrollHeight - p.offsetHeight;
        var s = (['hidden', 'visible'].indexOf(overflow) < 0);
        if ((s || p.tagName === 'HTML') && hiddenHeight > 0) {
            if ((Q.Pointer.movement.positions.length == 1)
            && (pos = Q.Pointer.movement.positions[0])) {
                var sy = Q.Pointer.getY(event)
                    + Q.Pointer.scrollTop();
                if ((sy > pos.y && p.scrollTop == 0)
                || (sy < pos.y && p.scrollTop >= hiddenHeight)) {
                    continue;
                }
            }
            scrollable = p;
            break;
        }
    } while (p = p.parentNode);
    if (!scrollable) {
        Q.Pointer.preventDefault(event);
    }
}

var Q = {
    preventTouchScrolling: function () {
        Q.addEventListener(window, 'touchmove', _touchScrollingHandler);
    },
    restoreTouchScrolling: function () {
        Q.removeEventListener(window, 'touchmove', _touchScrollingHandler);
    }
};