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