jquery - 使用 animate-scrollTo 时 jQuery 闪烁

Question

scrollTo当它被 jQuery 函数调用时，我遇到了这个函数的问题animate。

这是我的代码：

$("#button").click(function(){
    $("body").animate({scrollTop: 1400},"slow");
});

当我单击按钮时，闪烁出现在正文滚动之前。例如，我在（滚动位置）1000，当我单击按钮时，发生了以下情况：

1. （滚动位置）1400 上的页面/图像出现，看起来我已经去了（位置）1400
2. 然后它再次移动到（位置）1000，这发生得如此之快，看起来像闪烁
3. 最后它像普通滚动一样滚动到1400..

在 Firefox 上它总是出现，有时也出现在 chrome 上。

Answer 1

我有同样的闪烁问题。它是由触发函数的链接中的哈希锚引起的。用 preventDefault() 修复它：

$("#button").click(function(e){
    e.preventDefault();
    $("body").animate({scrollTop: 1400},"slow");
});

Answer 2

<a href="#" onclick="return scrollFromTop(1400, 2000);">scroll</a>

function scrollFromTop(offset, duration) {
    $('body').stop(true).animate({scrollTop: offset}, duration);
    return false;
});

有同样的问题...通过在点击处理程序上返回 false 来修复它

Answer 3

通过像这样停止动画解决了这个问题：

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function(e){
            if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove"){
                $("html,body").stop();
            }
        })

在那里找到：当用户手动滚动时，Jquery .animate() 停止滚动？

Answer 4

在 laravel 项目中使用“barryvdh/laravel-debugbar”包时遇到了同样的问题。如果这是您的情况，请禁用它。