当溢出设置为auto或在WP8 WebBrowser控件中滚动时弹跳

Question

我知道这篇文章是重复的，但没有一个可接受的解决方案。 Windows phone Webbrowser bouncy behaviour

“ - ms-touch-action：none;”工作顺利util一个元素具有溢出的样式自动或滚动值。内容滚动到顶部或底部后。如果我把手指放回去并继续滚动，页面会用我的手指反弹。

这个问题只会发生在控件而不是系统浏览器中，所以我猜他们应该是一个解决方案呢？

任何人都有解决方案吗？

Answer 1

更新

1. 我为此问题创建了一个插件，请查看https://github.com/vilic/cordova-plugin-fix-wp-bouncing

2. 如果你想要“下拉和释放刷新”这样的东西似乎不太好用。为此，我管理了另一个解决方案，但我会将代码留给自己 滚动到顶部时，将overflow-y更改为hidden。以编程方式根据触摸事件和scrollTop计算preventDefault()，根据您的以编程方式计算overflow-y <，在hidden和auto之间切换scrollTop / strong>即可。触摸结束时，模拟惯性。务必在适当的位置清除计时器。

原始答案

经过大量的诱惑，终于找到了一个可以接受的解决方案！我想我会成为第一个？但坏消息是，它不是一个简单易用的。

我读到一篇文章讨论如何在WP7 here中抑制缩放和滚动交互，遗憾的是它在WP8中没有那么好用（没有测试过WP7）。

但即使它有效，它也不会是我想要的。因为我希望overflow-auto-or-scroll元素能够滚动，而不会在整个页面上发生弹跳效果。

所以我们在这里有一种方法来抑制滚动，但我们需要条件。这是完整的解决方案。

C＃（需要另一个LinqToVisualTree.cs文件）

private void mainBrowser_Loaded(object sender, RoutedEventArgs e) {
    var border = mainBrowser.Descendants<Border>().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;
    });
}

看起来不太好但效果很好。还有好运的人坚持这么长时间〜