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

一連のアニメーションを開始してスムーズなスクロールを期待することはできません。必要なのは、このアニメーションがカバーする距離を事前に計算するだけで、1 つのアニメーションを開始することです。また、jQuery には、mouseenter と mouseleave を組み合わせた優れたラッパーがあります。これは、パラメーターとして 2 つの関数を持つ 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 に答える