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();位置 - 如果是mouseleave或任何其他情况，我们可以询问ternary operator ( ? : )如果布尔值!t (is0==false)该做什么{ {1}}动画显示$listSH其他动画为0。

在DOM上，您可以调用/启动loop()

并在'mouseenter mouseleave'抓住事件并再次在三元运算符内执行：
IF 事件== mouseenter：.stop()任何动画
ELSE ：重启我们的loop()功能（正如我所说，来自当前的scrollTop()）。

超时后自动滚动

1 个答案: