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

问题描述

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

这是我的代码片段：

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

    });
</script>

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

解决方法

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

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

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