在Firefox上设置scrollTop会导致反弹

时间:2014-11-03 19:08:07

标签: javascript jquery firefox

这应该证明这个问题。它只发生在FF中。 Chrome按预期行事。

我尝试做的事情(参见下面的jsfiddle)是当底部与红色部分的底部齐平时停止滚动蓝色部分。在FF上会有一点延迟然后反弹。

function adjustPosition() {
    var padding = $(window).height() - (checkoutBtn().offset().top - $(window).scrollTop() + checkoutBtn().height());
    $(window).scrollTop(menuBox().height() - $(window).height() + menuBox().offset().top + padding);
}

function needsPositioned(wheelDelta) {
    return ((checkoutBtn().offset().top + checkoutBtn().height() + 10) >= (menuBox().offset().top + menuBox().height())) && wheelDelta < 0
}

function checkScrollPosition($event) {
    var wheelDelta = ($event.wheelDelta || ($event.detail*-1));
    if (needsPositioned(wheelDelta)) {
        db_adjustPosition($event);
        $event.preventDefault();
        $event.returnValue = false;
        return false;
    }
    return true;
}

function adjustHeight($event) {
    if ($event && ($event.type === 'mousewheel' || $event.type === 'DOMMouseScroll' || $event.type === 'resize')) {
        if (!checkScrollPosition($event)) {
            return false;
        }
    }
}

http://jsfiddle.net/martyphee/pu1qncaL/3/

更新: 我似乎找到了这个问题。它与OSX惯性设置有关。一旦我将其关闭,弹跳就会消失。知道如何打击它?

1 个答案:

答案 0 :(得分:0)

您可以使身体高度为100%并禁用滚动。之后你可以在体内创建一个允许滚动的div。这将禁用动量滚动/反弹效果。

在文档滚动上执行:

event.stopPropagation();

https://api.jquery.com/event.stopPropagation/

也许不需要JS,在body标签上尝试这个css代码:

-webkit-overflow-scrolling: none;