在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()。