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

问题描述

我知道这篇文章是重复的，但没有可接受的解决方案。
Windows手机浏览器弹性行为

- ms-touch-action：none;工作流畅地使用一个元素具有值自动或滚动溢出的风格。内容滚动到顶部或底部后。如果我把手指放回去，然后继续滚动，页面会用手指反弹。

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

任何人都可以得到解决方案吗？

解决方案

更新

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




2. 如果您想要下拉并释放以进行刷新，似乎并不奏效。为此，我管理了另一个解决方案，但我会将代码留给自己。
   
   将 overflow-y 更改为 hidden 滚动到顶部时。基于触摸事件和 preventDefault（），切换 overflow-y ，以编程方式计算 scrollTop code>隐藏和 auto ，基于您的以编程方式计算 scrollTop 即可。当触摸结束时，模拟惯性。

原始答案

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

我阅读了一篇文章，讨论如何抑制WP7中的缩放和滚动交互这里，不幸的是它在WP8中效果并不好（没有测试过WP7）。

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

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

C＃（another

  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（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; 
 
返回顶部？底部？ 'both'：'top'：bottom？ '底'：''; 
}; 
 
 window.onmanipulationcompleted = function（）{
 window.manipulationTarget = null; 
}; 
 
 //你需要调用每个元素
 //使用overflow auto或者滚动这个：
函数preventBouncing（ele）{
 / /使用jQuery。 
 ele.on（'MSPointerDown pointerdown'，function（e）{
 window.manipulationTarget = this; 
}）; 
} 
  

它看起来不太好，但效果很好。祝好运的人们坚持了这么久〜/ b

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 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?

Anyone gets a solution?

解决方案

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<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屋！