Question

当鼠标悬停在特定元素上时，我想向上或向下滚动窗口。

到目前为止我所拥有的基本上是有效的，但并不是“顺利”。它开始和停止，不好看。你知道如何更平稳地滚动滚动吗？

这是我的代码：

doScroll = 0;
$(".helperDown").mouseenter(function() {
    scrollHandler = setInterval( function() {
        console.log('scrolling down...');
        if(doScroll == 0) {
            doScroll = 1;
            $("html, body").animate({scrollTop: fromTop+50}, 200, 'linear', function() {
                doScroll = 0;
            });
        }
    }, 200);
});

$(".helperDown").mouseleave(function() {
    clearInterval(scrollHandler);
});

.helperDown是鼠标必须进入的区域才能开始滚动。滚动事件后始终会重新计算fromTop。

Answer 1

您无法启动一系列动画并期望平滑滚动。您需要的是仅通过预先计算此动画将覆盖的距离来启动一个动画。此外，jQuery有一个很好的mouseenter和mouseleave组合包装器。它是hover（）函数，有两个函数作为参数。以下代码块将解决您的问题。此外，此plnkr具有向上和向下滚动功能： https://plnkr.co/edit/WoneJ8?p=preview

$(function () {
    // change this value as per your need
    var distancePerSec = 1000;

    $(".helperDown").hover(function () {

        var h = $("body").height();
        var targetScrollTop = h - $(window).height();
        var distanceToTravel = targetScrollTop - $(window).scrollTop();
        var animationDuration = (distanceToTravel / distancePerSec) * 1000;

        $("html, body").animate({
            scrollTop: targetScrollTop
        }, animationDuration, 'linear');

    }, function () {

        // stop the animation
        $("html, body").stop();

    });
})

鼠标悬停时JS滚动窗口

1 个答案: