超時後自動滾動

我有一個id爲list的元素，我想要自動滾動到底部，然後回到頂部連續，但應停止滾動以允許用戶控制滾動。經過一段時間，用戶沒有在元素上出現"mousemove mousedown"，元素應該開始再次自動滾動。超時後自動滾動

我在管理超時（自動向下滾動後自動向上滾動）和間隔（用於繼續自動滾動向上和向下）以及「mousemove mousedown」事件並在這些事件發生後停止動畫時遇到困難。我的代碼是一團糟。

我向下滾動：

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

向上滾動：

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

來源

2013-06-25 John

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回調召回將循環ou的function loop() r動畫。

的loop我們只需要獲得當前$list.scrollTop();位置內 - 在鼠標離開或任何其他情況的情況下，所以我們可以問一個ternary operator (? :)什麼的情況下，布爾!t (is0==false)動畫到$listSH其他動畫到0做。

在DOM準備調用/啓動loop()

和'mouseenter mouseleave'搶事件，並再次三元運營商裏面做：
IF事件== mouseenter：.stop()任何動畫
ELSE：重新啓動我們的loop()功能（正如我所說，從目前的scrollTop()）。

來源

2013-06-25 14:27:41

這太好了。我正在尋找一個超時而不是mouseenter mouseleave。我只是在settimeout中添加的。我將如何去設置自動滾屏的時間和自動滾屏的時間？ – John

@匿名時間？ YOu可以根據需要更改'2000' –

我希望分開上下滾動速度。我想到了，但我只是添加了一個三元運算符：！t？ timeDown：2000年的時間。 – John

超時後自動滾動

回答

相關問題