0

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

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

这是我的代码：

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总是在滚动事件后重新计算。

4

1 回答 1

0

您不能开始一系列动画并期望平滑滚动。您需要的是仅通过预先计算该动画将覆盖的距离来启动一个动画。此外，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();

    });
})
于 2016-01-26T16:18:14.580 回答