스크롤

Question

이 내가 http://www.rogerdubuis.com/을 달성하고자하는 것입니다이 내 현재 코드입니다 : 아래로 조금 스크롤 한 후

var offsetArray = Array(); 
offsetArray[0] = $('header'); 
offsetArray[1] = $('#puslapis2'); 
offsetArray[2] = $('#puslapis5'); 
offsetArray[3] = $('#puslapis7'); 
offsetArray[4] = $('#puslapis9'); 
var pos = 0; 
var lastScrollTop = 0; 

$(window).scroll(function() { 
    console.log("pos " + pos); 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop) { 
     console.log("Scroll down"); 
     $('html,body').animate({scrollTop: offsetArray[pos + 1].ofset().top}, 'slow', function() {pos++;}); 
    } else { 
     console.log("Scroll up"); 
     $('html,body').animate({scrollTop: offsetArray[pos - 1].ofset().top}, 'slow', function() {pos--;}); 
    } 
    lastScrollTop = st; 
}); 

, 애니메이션해야 한 번만 호출하면 pos가 하나씩 증가해야합니다. 하지만 아래로 스크롤하면 엉망이되어 버립니다. 어떤 아이디어를 방지하는 방법?

Answer 1

제공된 링크와 같은 단일 페이지 스크롤링을 관리하는 플러그인을 작성했습니다. jQuery Mousewheel Intention

다음은 내가하려는 생각을하는 바이올린입니다. jsfiddle

(function ($) { 
    $(function() { 
     var scrolling = false; 
     var sections = $('.section'); 
     var container = $('#container'); 
     var pos = 0; 

     function wheelDirection(evt) { 
      if (!evt) { 
       evt = event; 
      } 
      return (evt.detail < 0) ? 1 : (evt.wheelDelta > 0) ? 1 : -1; 
     } 

     function animate(dir) { 
      if (scrolling) { 
       return; 
      } 
      var next = $(); 
      if (dir === 'down') { 
       next = sections.eq(pos).next(); 
      } else { 
       next = sections.eq(pos).prev(); 
      } 
      if (!next.length) { 
       return; 
      } 
      scrolling = true; 
      container.animate({ 
       scrollTop: '+=' + next.offset().top 
      }, 'slow', function() { 
       pos = sections.index(next); 
       sections.removeClass('active'); 
       next.addClass('active'); 
       scrolling = false; 
      }); 
     } 

     function scroll(event) { 
      var direction = wheelDirection(event.originalEvent); 
      direction = (direction >= 0) ? 'up' : 'down'; 
      animate(direction); 
     } 

     function scrollHandler(event) { 
      if (event.certainty > 0.6) { 
       scroll(event); 
      } 
     } 

     $(window).on('mousewheelintention', scrollHandler); 
    }); 
}(jQuery)); 

Answer 2

그래서 몇 년이 지났지만, 모두를위한 솔루션을 찾고있는 사람들 :

이 작동하지 않습니다 같은 jQuery로 배열을 사용! (당신의 콘솔에서 볼 수 있습니다).

그래서 "개인"으로 지정하여 새 행마다 편집해야합니다.

wain = 0; 
var pos = 0; 
var lastpos = 0; 
jobdone = false; 

$(window).scroll(function() { 
    pos = $(this).scrollTop(); 

    if (pos > lastpos) { 
     //Oben? 
     if (wain == 0) { 
      $('html, body').animate({ 
        scrollTop: $('#port').offset().top 
       }, 'fast'); 

      wain++; 
      lastpos = pos; 
     }; 
    } else if (pos ==lastpos) { 
    } else { 
     //Portfolio? 
     if (wain == 1) { 
      $('html, body').animate({ 
        scrollTop: $('#main').offset().top 
        }, 'fast'); 
      wain--; 
     };     
    }; 

    lastpos = pos; 

});