위쪽, 아래쪽, 위쪽, 그리고 아래쪽으로 스크롤

Question

자동 스크롤러를 만들고 싶습니다. 위에서 아래로 스크롤 할 때 더 빨리 스크롤, 그러나

$(".scrollballer").animate({ scrollTop: $(document).height() }, 12000); 

setTimeout(function() { 
    $('.scrollballer').animate({scrollTop:0}, 12000); 
},12000); 

setInterval(function(){ 

$(".scrollballer").animate({ scrollTop: $(document).height() }, 12000); 

setTimeout(function() { 
    $('.scrollballer').animate({scrollTop:0}, 12000); 
},12000); 

},12000); 

를 천천히 아래로 스크롤해야하고, 천천히 맨 위로 스크롤해야하고, 그래서 ....

난이 작성했습니다. 어떻게 같은 속도로 만들까요?

Answer 1

문제는 setInterval이 12000에 대해 설정되어 있지만 돌아 가기 일어나 24000 소요, 그래서 setInterval가 24000에 있어야합니다.

setInterval(function() { 

    $(".scrollballer").animate({ scrollTop: $(document).height() }, 12000); 

    setTimeout(function() { 
     $('.scrollballer').animate({scrollTop:0}, 12000); 
    },12000); 

}, 24000); // <-- Don't run again until the full down/up cycle is complete 

---

그러나,이 작업을 수행하는 더 나은 방법이있다. 이를 개선하기위한 첫 번째 단계는 setTimeout 대신 .animate에 대한 콜백을 사용하는 것입니다.

setInterval(function() { 
    // Use a callback to schedule the "up" animation-------------------------v 
    $(".scrollballer").animate({scrollTop:$(document).height()}, 12000, function() { 
     $('.scrollballer').animate({scrollTop:0}, 12000); 
    }); 

}, 24000); 

---

다음 단계는 내부 .animate()는 콜백을 수용 할 수 있음을 깨닫게하는 것입니다, 그래서 우리는 정말 setInterval() 필요하지 않습니다. JS 타이머가 완벽하지 않아 이전 타이머가 완료되기 전에 하나의 .animate()이 시작될 수 있기 때문에 콜백이 더 좋습니다. 콜백을 사용하면이 문제를 방지 할 수 있습니다.

// -----------v---create a named function that performs the down/up animations 
(function down_then_up() { 

    $(".scrollballer").animate({scrollTop:$(document).height()}, 12000, function() { 

    // Use the `down_then_up` function as a callback----v--- to repeat the cycle 
     $('.scrollballer').animate({scrollTop:0}, 12000, down_then_up); 
    }); 

})(); // <-- invoke the `down_then_up` immediately to get it going. 

여기에서 나는 페이지를 스크롤하는주기를 수행하는 down_then_up이라는 함수를 만듭니다. 이 함수는 바로 끝에 ()에 의해 즉시 호출됩니다. 그런 다음 내측에있는 .animate() 전화로 다시 전화가 오면, down_then_up 함수를 콜백으로 전달합니다.

---

편집

또 다른 문제는 당신이 아래로 스크롤 할 때, 당신이 실제 이미지 컨테이너보다 큰에도 불구하고, 전체 화면의 높이를 여행하는 것입니다. 따라서 창 높이가 800이면 jQuery는 해당 숫자를 기반으로 계산하므로 12 초 내에 도착하려면 적절한 속도가 필요하다고 생각합니다.

그러나, 가입 방법, 그것은, 0까지 이제 용기 높이 224 경우 jQuery를 해당 번호에 기초하여 산출한다 (실제로는 오직 용기의 높이 임) 스크롤 현재 위치 에서 시작 이는 12 초 만에 더 짧은 거리를 커버하기 위해 더 천천히 움직여야 함을 의미합니다.

창 대신 컨테이너 높이를 기준으로 스크롤 거리를 설정하면 위 또는 아래로 이동해도 동일한 거리로 이동하므로 속도가 빨라집니다.