マウスアップまで徐々にスクロールします

Question

position: fixed要素の上でマウスボタンを押している間にビューポートを徐々にスクロールさせるにはどうすればよいですか？ここで

Answer 1

あなたはsetTimeout()とclearTimeout()との組み合わせでjQuery.animate()でこれを達成することができます

$('.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

それは、FirefoxとChromeの両方で動作するように私は$('html, body')をターゲットにしています。これは、2つのセレクタのためにanimate()が実際に2回実行されるため、ややこしいことになります。これを解決するために私はjQuery.stop()を使用しました。 Firefoxは$('html').scrollTop()を使用でき、Chromeは$('body').scrollTop()を使用するため、Math.max()を使用して増分を計算しました。この関数は完了時に自己実行し、マウスが離されるとclearTimeout()とjQuery.stop()を使用します。