2

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

我很难管理超时（自动向下滚动后自动向上滚动）和间隔（继续向上和向下自动滚动）和“mousemove mousedown”事件，一旦这些事件发生就停止动画。我的代码是一团糟。

我向下滚动：

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

向上滑动：

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

1 回答 1

2

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 或任何其他情况下，我们可以询问在 boolean animate to else animate toternary operator ( ? : )的情况下要做什么。!t (is0==false)$listSH0

在 DOM 上准备好你打电话/开始你的loop()

并在'mouseenter mouseleave'三元运算符中再次抓取事件：
IF event == mouseenter：.stop()任何动画
ELSE：重新启动我们的loop()函数（正如我所说，从 current scrollTop()）。

于 2013-06-25T14:27:41.790 回答