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

Posted 2023-05-07

【中文标题】执行 animate/scrollTop 后浏览器滚动中断

【英文标题】：Browser scrolling breaks after animate/scrollTop is executed

【发布时间】：2021-04-26 08:33:44

【问题描述】：

在调用 animate 后，我遇到了浏览器/鼠标滚轮中断的奇怪问题。 “重置”它的唯一方法是刷新浏览器，并避免悬停调用。基本上，当我将鼠标悬停在元素上时，会有一个滚动动作。它可以工作，但在那之后，我的滚轮没有响应。

这是我的代码 sn-p：

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

    );
</script>

似乎在 Firefox 中恢复，但 Chrome 需要一个新鲜的。我想知道是否需要重置滚动或其他什么？

【参考方案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;
);

【讨论】：

是的，这样好多了。谢谢！