当溢出设置为自动或在 WP8 WebBrowser 控件中滚动时弹跳 [英] Bouncing when overflow set to auto or scroll in WP8 WebBrowser control

问题描述

我知道它与这篇文章重复，但没有可接受的解决方案.Windows 手机网络浏览器弹跳行为

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

"-ms-touch-action: 无;"工作顺利 util 元素具有溢出样式，值为 auto 或 scroll.在内容滚动到顶部或底部之后.如果我把手指放回原处，继续滚动，页面会随着我的手指弹跳.

"-ms-touch-action: none;" works smoothly util an element has the style of overflow with value auto or scroll. after the content scrolls to the top or bottom. if i put away my finger and back, and continue scrolling, the page bounces with my finger.

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

this issue would only happen in the control rather than the system browser, so I guess their should be a solution anyway?

有人有解决办法吗?

推荐答案

更新

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

如果您想要下拉并释放以刷新"之类的东西，它似乎不太好用.为此，我管理了另一个解决方案，但我会将代码留给自己.
当它滚动到顶部时，将 overflow-y 更改为 hidden.根据触摸事件和preventDefault() 以编程方式计算scrollTop，在hidden 和 之间切换overflow-yauto 基于您以编程方式计算的 scrollTop.当触摸结束时，模拟惯性.请务必在正确的行清除计时器.

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.

我读过一篇文章，讨论如何在 WP7 中抑制缩放和滚动交互 此处，不幸的是它在 WP8 中效果不佳(尚未测试 WP7).

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#(另一个 LinqToVisualTree.cs 文件是必需的)

C# (another LinqToVisualTree.cs file is required)

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

它看起来不太好，但效果很好.祝坚持这么久的人好运~

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

这篇关于当溢出设置为自动或在 WP8 WebBrowser 控件中滚动时弹跳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！