JS Scroll window while mouseover

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 -combined. Это функция 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(); 

    }); 
})