앵커로 마우스 스크롤

Question

첫 번째 질문은 잘하면 너희들 도울 수있어! Im는 코더보다 훨씬 예술가이다. 그래서 Im은 완전히 여기에서 길을 잃었다.

그래서! 제가하고 싶은 것은 이것입니다.

하나의 div가 500 % 인 페이지를 설정하고 있습니다. 그것은 20 %의 키가되는 5 개의 div를 포함하고있어서 어떤 화면에서도 완벽하게 맞는 5 개의 div를 제공합니다. 다음은 jFiddle의 예입니다. (http://jsfiddle.net/NwUvV/3/)

그러나.

필요한 것은 사용자가 스크롤 할 때 마우스 휠이 각 div로 완벽하게 스크롤하는 것입니다. 에서와 같이 사용자가 마우스 휠을 스크롤하고 페이지를 div # 2 (앵커 또는 ID 등)로 이동합니다. 내가 원하지 않는 것은 사람들이 div 1의 절반을 화면에, div 2의 절반을 가질 수 있다는 것입니다. 마우스 휠을 사용하여에 다음 DIV에 완벽을 제공하는 방법을 http://www.beoplay.com/Products/BeoplayA9?utm_source=bang-olufsen.com&utm_medium=referral&utm_campaign=Bang-Olufsen.com%2BProduct%2BPage&utm_term=EXPERIENCE%2BA9&utm_content=BeoPlay%2BA9%2B%3A%2BAll#at-a-glance

참조 :

이 여기 사이트의 예입니다? 앵커로 잠그고 부드럽게 스크롤하는 것처럼 보입니다. 그렇습니까?

언제든지 도와 드릴 수 있습니까?

미리 감사드립니다. jQuery를위한 마우스 휠 플러그인을 사용

제프

Answer 1

, 당신은 스크롤의 방향을 감지 할 수있는 스크롤 시작하고 false를 반환 변수를 설정; 스크롤이 끝나면 자신의 애니메이션을 트리거하여 감지 된 스크롤 이벤트의 방향으로 윈도우를 스크롤 할 수 있습니다.

VIDesignz의 요청에 따라 위의 예제를 사용하여 버전을 만들 수 있습니까?

Answer 2

여기에 사람이 있습니다!

은 궁극적으로 우리가 스크롤을 차단해야합니다 ... 당신이 알아 낸 여부를지고 결국 경우 여기를 EXAMPLE

var tempScrollTop = 0; 
var currentScrollTop = 0; 
var scrollHeight = $(window).height(); 
var newHeight = 0; 


function scrollIt() { 

$(window).off('scroll', scrollIt); 

    currentScrollTop = $(window).scrollTop(); 


    if (tempScrollTop < currentScrollTop) { 
     newHeight = newHeight + scrollHeight; 
     $('html').animate({scrollTop: newHeight}, 500, function(){ 
      var setScroll = setTimeout(function(){ 
       console.log('Animation Complete'); 
       tempScrollTop = $(window).scrollTop(); 
       $(window).on('scroll', scrollIt); 
      }, 10); 
     }); 

    } else if (tempScrollTop > currentScrollTop){ 
     newHeight = newHeight - scrollHeight; 
     $('html').animate({scrollTop: newHeight}, 500, function(){ 
      var setScroll = setTimeout(function(){ 
       console.log('Animation Complete'); 
       tempScrollTop = $(window).scrollTop(); 
       $(window).on('scroll', scrollIt); 
      }, 10); 
     }); 
    } 


} 

$(window).on('scroll', scrollIt); 

Answer 3

확실하지 예를 확인,하지만 난 거기에 예를 던질 것이라고 생각 사용자가 스크롤하는 방식을 결정할 수 있습니다.

방향을 알았 으면 활성 인덱스의 저장된 변수를 사용하고 활성 요소의 오프셋을 기준으로 본문에 애니메이션을 적용 할 수 있습니다.

// setup active index variable 
var index = 0; 
// we will use this to determine scroll direction 
var lastTop = 0; 

$(window).on('scroll', function(ev) { 
    // get the current top offset 
    top = $(window).scrollTop(); 
    // Determine direction 
    if (top > lastTop) { 
     // down 
     index++ 
     // handle animation 
    } else { 
     // up 
     index-- 
     // handle animation 
    } 
    // update lastTop for next interaction 
    lastTop = top; 

} 

코드 자체는 무슨 일이 일어나고 있는지 이해하기에 충분한 주석되어야하지만 당신이 어떤 추가 지원이 필요하거나 질문이 있으면 언제든지 알려주세요.

여기 http://jsfiddle.net/NwUvV/71/

등, (대체와 가능성 CSS3) 전이에 도움이되는 몇 가지 청소를 사용할 수 있지만 희망이를 통해 포인트를 얻고, 거기에서 걸릴 수 있습니다 전체 예제를 참조하십시오.

가변 크기의 요소가 포함 된 코드는 원하는 경우 CSS의 주석을 확인하십시오.