jQuery - 스크롤 할 때 페이지를 제어하십시오.

Question

이 웹 사이트에는 5 개의 블록이 있고 모두가 뷰포트 크기, 100 % 너비 및 100 % 높이를가집니다. 따라서 페이지가로드되면 첫 번째 페이지 만 볼 수 있습니다. 다른 것들은 그것 아래 있습니다. 그런 다음 아래로 스크롤하면 마지막 페이지가있는 페이지의 끝까지 페이지가 도달 할 때까지 2 번째 페이지를보고 3 번째 페이지를 볼 수 있습니다. 페이지가 기본 선형 방식 대신 블록 단위로 스크롤되도록하는 방법이 있다면 저는 생각하고있었습니다. 나는 두 블록 사이에서 길을 보는 대신에 아래로 스크롤 할 때 사용자가 두 번째 블록을 직접 볼 수있게하고 싶습니다 (가능하면 직접 애니메이션이 아니라 가능한 한 애니메이션으로). 이러한 블록은 다른 페이지와 같으며 아무 곳이나 클릭하지 않고도 (내가 가장 쉽게 사용할 수있는 유일한 방법 일 수 있습니다), 페이지 단위로 이동하고 스크롤하는 것이 좋습니다. 그게 가능하니? 감사!

편집 :

내가 scrollTo 플러그인을 사용했지만, 나도 그것을 알아낼 수 없었다. 사용자가 쉽게 아래로 스크롤 할 때 고려해 봅시다. 이것은 내가 무슨 짓을 :

var tempScrollTop, currentScrollTop = 0; // 2 vars to check if user scrolls down 
var isScrolling = false; 
var nextPage = 2 // I'm on 1st page, I want to show page 2 when user scrolls down; 
$(window).scroll(function(){ 
    currentScrollTop = $(window).scrollTop(); // current position 

    if (tempScrollTop < currentScrollTop && ! isScrolling){ // if user scrolls down 
    isScrolling = true; // animation in progress, shouldn't get into this 'if' till finished 
    $(window).scrollTo('section#page-' + nextPage, 1000, { 
     onAfter: function(){ isScrolling = false; nextPage++; } 
    }); 
    } 

    tempScrollTop = currentScrollTop; // update the current position 
}); 

'가'문 검사는 사용자가 아래로 스크롤합니다. 기술적으로는 작동해야하지만 원하는 페이지를 보여준 후에 그는 다음 페이지로 이동 한 다음 하나씩 이동 한 다음 끝까지 스크롤을 계속합니다! 약간의 테스트를 통해, 모든 단일 애니메이션 (단일 전체 페이지 스크롤을 의미 함) 이후에 실행되어야하는 코드가 무작위로 실행된다는 것을 알았습니다. 즉, isScrollling = false는 발생하지 않고 nextPage ++는 스크롤을 계속하는 이유입니다 (실제로는 다음 페이지로 이동하기 때문입니다). 애니메이션이 끝난 후에해야 할 일이 아니라, 끝내야합니까? 나는 혼란 스럽다.

Answer 1

가장 좋은 방법은 jQuery.ScrollTo plugin이다.

설정이 매우 쉽고 모든 종류의 애니메이션과 스크롤하려는 위치를 표현할 수 있습니다.

는 그리고 당신은 당신이 원하는 것을 얻을 둘의 조합으로 스크롤 이벤트, using this plugin

을 처리해야합니다.

다음 또는 이전 요소로 스크롤하려면 현재 또는 현재 표시된 항목을 스크롤하여 다음 또는 이전 항목으로 이동할 수 있어야합니다.

scrollTo를 사용할 때마다 스크롤 위치 (sccrollTop 속성)를 추적해야하므로 사용자가 위 또는 아래로 스크롤하는지 짐작할 수 있습니다.

마지막으로, 사용자가 스크롤을 시작할 때 "스크롤 플래그"가 설정되어 있어야하고 스크롤을 멈 추면 설정이 해제되어 각 scrollTo 이동 후 스크롤 위치를 계속 살펴야하는지 알 수 있습니다.

또 다른 옵션은 jQuery 도구를 사용하는 것이지만과 같은 것으로 변경해야합니다. 이것은 당신이 요구 한 것이 아니지만 더 나은 UX를 제공한다고 생각합니다.

Answer 2

첫 번째 애니메이션이 중지되고 isScrolling이 설정 해제 된 경우 스크롤 이벤트가 트리거되므로 어쨌든 페이지가 바닥에 도달 할 때까지 다른 애니메이션을 얻을 수 있습니다. 애니메이션이 멈췄을 때 스크롤 플래그를 해제하려고 할 때 나는 그런 문제를 가지고있다. 간단한 해결책은 스크롤 플래그를 해제하는 것을 지연하는 것입니다.

$(window).scrollTo('section#page-' + nextPage, 1000, { 
    onAfter: function() { 
     setTimeout(function() { isScrolling = false; nextPage++; }, 100); 
    } 
});