Bouncing when overflow set to auto or scroll in WP8 WebBrowser control

Question

I know it is duplicate with this post, but there was not an acceptable solution. Windows phone Webbrowser bouncy behaviour

\"-ms-touch-action: none;\" works smoothly

Answer 1

Update

1. I created a plugin for this issue, check out https://github.com/vilic/cordova-plugin-fix-wp-bouncing

2. It doesn't seem to work well if you want something like "pull down and release to refresh". For this purpose, I managed another solution but I will leave the code to yourself.
   Change overflow-y to hidden when it scrolls to top. Programmatically calculate scrollTop based on touch events and preventDefault(), toggle overflow-y between hidden and auto based on your programmatically calculated scrollTop. When the touch ends, simulate the inertia. Be sure to clear your timer at proper line.

Original Answer

After tons of tempts, finally worked out an acceptable solution! I guess I would be the first one? But the bad news is, it's not a simple and easy-to-use one.

I read about an article discussing how to suppressing zoom and scroll interactions in WP7 here, unfortunately it doesn't work that well in WP8 (Haven't tested WP7).

But even it works, it won't be what I want. Because I would want the overflow-auto-or-scroll elements to be able to scroll, without the bouncing effect which happens on whole page.

So here we got a way to suppress the scrolling but we need conditions. Here's the complete solution.

C# (another LinqToVisualTree.cs file is required)

private void mainBrowser_Loaded(object sender, RoutedEventArgs e) {
    var border = mainBrowser.Descendants().Last() as Border;
    border.ManipulationDelta += border_ManipulationDelta;
    border.ManipulationCompleted += border_ManipulationCompleted;
}

void border_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e) {
    mainBrowser.InvokeScript("onmanipulationcompleted");
}

void border_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) {
    var status = mainBrowser.InvokeScript("onmanipulationdelta") as string;
    if (status == "top" || status == "both") {
        if (e.DeltaManipulation.Translation.Y > 0) {
            e.Handled = true;
        }
    }
    if (status == "bottom" || status == "both") {
        if (e.DeltaManipulation.Translation.Y < 0) {
            e.Handled = true;
        }
    }
}

JS

window.manipulationTarget = null;

window.onmanipulationdelta = function () {
    if (!window.manipulationTarget) {
        return '';
    }

    var target = window.manipulationTarget;

    var top = target.scrollTop == 0;
    var bottom = target.scrollTop + target.clientHeight == target.scrollHeight;

    return top ? bottom ? 'both' : 'top': bottom ? 'bottom' : '';
};

window.onmanipulationcompleted = function () {
    window.manipulationTarget = null;
};

// and you'll need to make calls to every elements
// with overflow auto or scroll with this:
function preventBouncing(ele) {
    // using jQuery.
    ele.on('MSPointerDown pointerdown', function (e) {
        window.manipulationTarget = this;
    });
}

It doesn't look good but works well. And good luck people who stuck on this for so long a time~