如何防止 UIWebViewBounce、“橡皮筋”答案

【问题标题】：How to prevent UIWebViewBounce, "rubber banding"如何防止 UIWebViewBounce、“橡皮筋”
【发布时间】：2014-06-15 23:02:23
【问题描述】：

在 Cordova CLI v3.4 中使用 ionicframework

我在我的 config.xml 文件中使用以下首选项。

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

通过 CLI 和 XCode 编译似乎无法解决任何问题。

然后我在整个项目范围内搜索了DisallowOverscroll，并确保所有值都设置为true

尽管在我看来，我仍然在使用橡皮筋。有人知道可能是什么问题吗？

谢谢！

【问题讨论】：

标签： cordova ios7 uiwebview ionic-framework

【解决方案1】：

According to this post on ionics forums：

“这是一个离子问题，而不是科尔多瓦问题。

 <ion-content
         has-bouncing="false"
         start-y="55"
         padding="true"
         has-tabs="true"
         has-header="true"
         >

使用has-bouncing 属性禁用ion-content 指令上的反弹效果

只需设置 attr has-bouncing="false"，我不知道为什么会覆盖 Cordova 配置设置。

【讨论】：

这不会覆盖 Cordova 的设置：默认情况下，使用 Cordova，您会对整个应用程序本身产生反弹效果，这意味着您的可滚动内容会反弹，而是您的整个应用程序会反弹，这并不是真的好的。使用 Ionic，反弹仅在您的 ion-content 内，默认情况下通常很好。
如何在ionic 2中做到这一点？

【解决方案2】：

您也可以在 HTML+JS 端执行此操作，前提是 HTML 文档不高于 WebView 视口（在 JS 中也称为 window.height）。您可以通过在适当的时间（即当元素及其所有父元素在用户开始移动手指的方向上没有可滚动的内容时）在“touchmove”事件上调用 preventDefault 来做到这一点。

我将向您展示实际的代码来执行此操作，而不使用 jQuery ...但您必须自己实现 Q.addEventListener 和 Q.removeEventListener（或使用 jQuery）。

function _touchScrollingHandler(event) {
    var p = event.target;
    var pos;
    var scrollable = null;
    do {
        if (!p.computedStyle) {
            continue;
        }
        var overflow = p.computedStyle().overflow;
        var hiddenHeight = p.scrollHeight - p.offsetHeight;
        var s = (['hidden', 'visible'].indexOf(overflow) < 0);
        if ((s || p.tagName === 'HTML') && hiddenHeight > 0) {
            if ((Q.Pointer.movement.positions.length == 1)
            && (pos = Q.Pointer.movement.positions[0])) {
                var sy = Q.Pointer.getY(event)
                    + Q.Pointer.scrollTop();
                if ((sy > pos.y && p.scrollTop == 0)
                || (sy < pos.y && p.scrollTop >= hiddenHeight)) {
                    continue;
                }
            }
            scrollable = p;
            break;
        }
    } while (p = p.parentNode);
    if (!scrollable) {
        Q.Pointer.preventDefault(event);
    }
}

var Q = {
    preventTouchScrolling: function () {
        Q.addEventListener(window, 'touchmove', _touchScrollingHandler);
    },
    restoreTouchScrolling: function () {
        Q.removeEventListener(window, 'touchmove', _touchScrollingHandler);
    }
};

【讨论】：