Allmählich scrollen auf Mousedown bis mouseup

Question

Wie kann ich das Bildfenster schrittweise nach unten scrollen, während die Maustaste über ein position: fixed Element gedrückt wird?

Answer 1

Hier können Sie dies mit jQuery.animate() in Kombination erreichen mit setTimeout() und 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

Ich bin Targeting $('html, body'), so dass es in Firefox und Chrome funktionieren. Dies wird ein wenig schwierig, weil die animate() wegen der zwei Selektoren tatsächlich zweimal läuft. Um das zu lösen, habe ich jQuery.stop() verwendet. Da Firefox die $('html').scrollTop() verwenden kann und Chrome die $('body').scrollTop() verwendet, berechnete ich die Schrittweite mit Math.max(). Die Funktion wird nach Beendigung automatisch ausgeführt und verwendet clearTimeout() und jQuery.stop(), wenn die Maus losgelassen wird.