javascript – 逐渐滚动mousedown直到mouseup

2023年5月16日 193次阅读

如何在按下鼠标按钮的同时逐渐向下滚动视口：固定元素？ 最佳答案 在这里你可以用
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().

点赞