如何防止UIWebViewBounce,"橡皮筋"

时间:2014-04-29 20:08:01

标签: cordova ios7 uiwebview ionic-framework

使用ionicframework与Cordova CLI v3.4

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

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

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

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

我的观点仍然是橡皮筋。任何人都知道可能是什么问题?

谢谢!

2 个答案:

答案 0 :(得分:12)

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配置设置。

答案 1 :(得分:0)

您也可以在HTML + JS端执行此操作,前提是HTML文档高于WebView视口(在JS中称为window.height)。你可以通过在&#39; touchmove&#39;上调用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);
    }
};