在mousedown上逐渐滚动，直到mouseup

Question

如何在使用position: fixed元素按下鼠标按钮时逐渐向下滚动视口？

Answer 1

在这里你可以jQuery.animate()结合setTimeout()和clearTimeout()做到这一点：

$('.button').on('mousedown', function() { 
    console.log('Start Animate'); 
    (function smoothSrcroll() { 
     console.log(Math.max($('html').scrollTop(), $('body').scrollTop())); 
     $('html, body').stop().animate({ 
      scrollTop: Math.max($('html').scrollTop(), $('body').scrollTop()) + 100 
     }, 1000, 'linear', function() { 
      window.timeout = setTimeout(smoothSrcroll(), 0); 
     }); 
    })(); 
}).on('mouseup', function() { 
    console.log('Stop Animate'); 
    $('html, body').stop(); 
    clearTimeout(window.timeout); 
}); 

CodePen Demo

我针对$('html, body')，这样它会在Firefox和Chrome浏览器。这有点棘手，因为animate()实际上运行两次，因为两个选择器。为了解决这个问题，我使用了jQuery.stop()。由于Firefox可以使用$('html').scrollTop()而Chrome使用$('body').scrollTop()，我使用Math.max()来计算增量。该功能在完成时自行执行，并在释放鼠标时使用clearTimeout()和jQuery.stop()。