javascript - 超时后自动滚动

Question

我有一个 id list 的元素，我想自动滚动到底部然后连续回到顶部，但应该停止滚动以允许用户控制滚动。在用户未在元素上 "mousemove mousedown" 一定时间后，该元素应再次开始自动滚动。

我在管理超时(自动向下滚动后自动向上滚动)和间隔(继续向上和向下自动滚动)和“mousemove mousedown”事件以及在这些事件发生后停止动画时遇到困难。我的代码一团糟。

我向下滚动:

$("#list").animate({
scrollTop : $("#list")[0].scrollHeight
}, timeDown);

向上滚动:

$("#list").animate({
    scrollTop : 0
}, timeUp);

Answer 1

http://jsbin.com/oqadud/3/edit

$list   = $('#list');
$listSH = $list[0].scrollHeight - $list.outerHeight();

function loop(){ 
  var t = $list.scrollTop();
  $list.stop().animate({scrollTop : !t ? $listSH : 0 }, 2000, loop);
}
loop();

$list.on('mouseenter mouseleave', function( e ){
  return e.type=="mouseenter"? $list.stop() : loop();
});

$listSH 将实际返回可用的滚动高度，然后您可以使用 animate 回调调用将循环的 function loop()我们的动画。

在 loop 中，我们只需要获取当前的 $list.scrollTop(); 位置 - 在 mouseleave 或任何其他情况下，我们可以请求一个 三元运算符 (? :) 如果 bool 值 !t (is0==false) 动画化为 $listSH 则如何处理，否则动画化为 0。

在 DOM 准备就绪后，您可以调用/启动您的 loop()

在 'mouseenter mouseleave' 上获取事件并再次在三元运算符中执行:
IF 事件 == mouseenter : .stop() 任何动画
ELSE :重新启动我们的 loop() 函数(如我所说，从当前的 scrollTop() 开始)。