自动滚动动画禁用用户滚动 - 能够覆盖它

Question

我想制作一个一直非常非常缓慢地滚动到底部的网站。

var docEnd= $(document).height();
$('html,body').stop(true,false).animate({scrollTop:docEnd}, 1200000,'linear');

问题是它禁用了用户滚动。
并且滚动事件 lisetener 不区分动画和用户滚动。

我需要让用户能够覆盖它：
web 自动滚动到底部 --> 用户将滚动 --> 动画停止，用户滚动到他想要的任何地方 --> 当他完成动画 returns。

非常感谢！
罗腾.

Answer 1

var doc=$('html,body');
var docEnd= doc.height();

doc.animate({scrollTop:docEnd}, 120000,'linear');

$(window).scroll($.debounce( 250, true, function(){
    console.log("scrolling");
    doc.clearQueue();
    doc.stop();
} ) );

$(window).scroll($.debounce( 250, function(){
    console.log("done");
    doc.animate({scrollTop:docEnd}, 120000,'linear');
} ) );

这里是 demo for the code above

它使用 debounce 插件来检查是否滚动。滚动时清除队列并停止自动滚动

自动滚动动画禁用用户滚动 - 能够覆盖它

automatic scroll animation disables user scrolling - ability to override it

javascript

jquery

animation

scroll

overriding