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

【问题标题】：automatic scroll animation disables user scrolling - ability to override it自动滚动动画禁用用户滚动 - 能够覆盖它
【发布时间】：2015-02-21 23:37:46
【问题描述】：

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

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

问题在于它禁用了用户滚动。
并且滚动事件监听器不区分动画和用户滚动。

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

提前非常感谢！
罗特姆。

【问题讨论】：

标签： javascript jquery animation scroll overriding

【解决方案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 插件来检查是否滚动。滚动时清除队列并停止自动滚动

【讨论】：

好的，谢谢！但由于某种原因，自动滚动的速度似乎比想象的要慢，而且当我尝试将“1200000”的值减小到更小的值时，动画似乎变得不流畅并变得碎片化。似乎连接到下面的行......顺便说一句，“250”是做什么的？ $(window).scroll($.debounce(250, true, function(){
250 毫秒之间的延迟，尝试减少延迟以实现平滑滚动，但它可能会占用更多内存