시간 초과 후 자동 스크롤

Question

아래쪽으로 자동 스크롤하고 다시 맨 위로 계속 돌아가려면 id list의 요소가 있지만 사용자가 스크롤을 제어 할 수 있도록 스크롤을 중지해야합니다. 사용자가 요소에 "mousemove mousedown"이없는 일정 시간이 지나면 요소가 자동 스크롤을 다시 시작해야합니다.

타임 아웃 (자동 스크롤 다운 후 자동 스크롤) 및 간격 (위아래 자동 스크롤 계속) 및 "mousemove mousedown"이벤트를 관리하고 해당 이벤트가 발생하면 애니메이션을 중지하는 데 어려움이 있습니다. 내 코드는 뒤죽박죽이었다.

내 아래로 스크롤 :

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

위로 스크롤 : 당신이 호출 할 animate 콜백을 사용할 수있는 것보다

$("#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를 반환합니다 function loop()은 ou를 반복합니다. r 애니메이션. 하는 MouseLeave 또는 기타 상황의 경우에 우리는 다른 $listSH에 부울 !t (is0==false) 애니메이션이 0에 애니메이션을 경우에 할 수있는 무엇 ternary operator (? :)을 요청할 수 있도록 - 우리가 현재 $list.scrollTop(); 위치를 얻기 위해 필요한 loop 내부

. DOM 준비 당신이 전화에

시작/당신의 loop()

및 'mouseenter mouseleave' 횡령 사건에와 다시 삼항 연산자의 내부가 수행
mouseenter == 이벤트 IF : .stop() 어떤 애니메이션 ELSE
: loop() 기능을 다시 시작하십시오 (내가 말했듯이 현재 scrollTop()에서).