2013-06-25 3 views
1

У меня есть элемент id list, который я хочу, чтобы авто прокручивался вниз, а затем возвращался в начало непрерывно, но должен прекратить прокрутку, чтобы позволить пользователю управлять прокруткой. Через некоторое время, когда пользователь не имеет "mousemove mousedown" элемента, элемент должен начать автоматически прокручивать.Autoscrolling after timeout

У меня возникли трудности с управлением таймаутами (для автоматического прокрутки вверх после автоматического прокрутки вниз) и интервалом (для продолжения автопрокрутки вверх и вниз) и событий «mousemove mousedown» и остановки анимации после этих событий. Мой код был беспорядочным.

Моей прокрутка вниз:

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

Прокрутка вверх:

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

ответ

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(), который будет зацикливаться r анимация.

внутри loop нам просто необходимо, чтобы получить текущую позицию $list.scrollTop(); - в случае MouseLeave или любых других обстоятельств, чтобы мы могли спросить ternary operator (? :), что делать в случае, если логическое !t (is0==false) одушевленные к $listSH еще анимировать к 0.

на DOM готов вы звоните/начать свой loop()

и 'mouseenter mouseleave' захватить событие и снова в тройном оператора сделать:
IF событие == mouseenter: .stop() любая анимация
ELSE: перезапустите нашу функцию loop() (как я уже говорил, с текущего scrollTop()).

+1

Это замечательно. Я искал тайм-аут, а не mouseenter mouseleave. Я просто добавил в настройке. И как я могу настроить время для автоматического прокрутки и время для автопрокрутки? – John

+0

@ Анонимное время? Вы можете изменить '2000' на все, что вам нужно –

+1

Я хотел разделить скорость прокрутки вверх и вниз. Я понял, хотя, я просто добавил тройного оператора:! T? timeDown: timeUp, где было 2000. – John