问题描述
我知道它与这篇文章重复,但没有可接受的解决方案.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?
有人有解决办法吗?
推荐答案
更新
我为此问题创建了一个插件,请查看 https://github.com/vilic/cordova-plugin-fix-wp-bouncing
如果您想要下拉并释放以刷新"之类的东西,它似乎不太好用.为此,我管理了另一个解决方案,但我会将代码留给自己.
当它滚动到顶部时,将 overflow-y
更改为 hidden
.根据触摸事件和preventDefault()
以编程方式计算scrollTop
,在hidden
和 之间切换
基于您以编程方式计算的 overflow-y
autoscrollTop
.当触摸结束时,模拟惯性.请务必在正确的行清除计时器.
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 控件中滚动时弹跳的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!