超时后自动滚动

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将返回实际可用的scrollHeight，然后您可以使用animate回调来调用将循环我们的动画的function loop()。

在loop中，我们只需要获取当前的$list.scrollTop();位置--在鼠标离开或任何其他情况下，这样我们就可以询问ternary operator ( ? : )在布尔值!t (is0==false)动画为$listSH或动画为0的情况下该如何处理。

在DOM就绪时，您可以调用/启动loop()

在'mouseenter mouseleave'上，获取事件，然后在一个三元运算符中执行以下操作：

IF event == mouseenter：.stop() any动画

ELSE：重启我们的loop()函数(正如我所说的，从当前的scrollTop())。