执行 animate/scrollTop 后浏览器滚动中断

Question

我运行遇到一个奇怪的问题，在调用 animate 后 browser/mouse 滚轮中断。 'reset' 的唯一方法是刷新浏览器，避免悬停调用。基本上，当我将鼠标悬停在元素上时，会出现一个滚动动作。可以用，但是之后，我的滚轮就没有反应了。

这是我的代码片段：

<script>
    $(function() {
        $('#product-home').hover(function(){
            $('html, body').animate({
                scrollTop: $("#navigation").offset().top - 250
            }, 2000);
            return true;
        });

    });
</script>

似乎可以在 Firefox 中恢复，但 Chrome 需要一个新的。我想知道我是否需要重置滚动条或其他东西？

Answer 1

请记住，只有一个参数的 .hover() 表示 .hover(handlerInOut)，即。 e.您的处理函数将在 mouseenter 和 mouseleave 事件中被调用。请尝试使用 .mouseenter()。

在 Chrome 中，这给了我更好的结果 - 动画后滚动仍然冻结，但只持续很短的时间。（用一个非常简单的网页测试）。

$(function() {
    $('#product-home').mouseenter(function(){
        $('html, body').animate({
            scrollTop: $("#navigation").offset().top - 250
        }, 2000);
    return true;
});

执行 animate/scrollTop 后浏览器滚动中断

Browser scrolling breaks after animate/scrollTop is executed

css

jquery

scrolltop

jquery-animate