jquery - Browser scrolling breaks after animate/scrollTop is executed

Question

I'm running into a weird problem with the browser/mouse scroll wheel breaks after animate is called. The only way to 'reset' it is to refresh the browser, and avoid the hover call. Basically, when I hover over the element, there is a scroll action. It works, but after that, my scroll wheel is not responding.

Here is my code snippet:

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

    });
</script>

Seems to recover in Firefox, but Chrome requires a fresh. I'm wondering if I need to reset scroll or something?

question from:https://stackoverflow.com/questions/65835611/browser-scrolling-breaks-after-animate-scrolltop-is-executed

Answer 1

Remember that .hover() with only one argument means .hover(handlerInOut), i. e. your handler function will be called both on mouseenter and mouseleave events. Try using .mouseenter() instead.

In Chrome this gives me better results - scrolling still freezes after animation, but only for a very short time. (Tested with a very simple webpage).

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