한 페이지로 구성된 마우스 휠 navi - 섹션 끝 부분에서만 스크롤

scrollTo 페이지에 onepageNav 스크립트가 있습니다. 페이지는 윈도우의 전체 높이가 아니라 추가 mousewhell에 문제가있었습니다.한 페이지로 구성된 마우스 휠 navi - 섹션 끝 부분에서만 스크롤

  $('body').mousewheel(function(event, delta) { 
      if (flag) { return false; } 
      $current = $('section.current'); 

      if (delta > 0) { 
       $prev = $current.prev(); 

       if ($prev.length) { 
        flag = true; 
        $('body').scrollTo($prev, 1000, { 
         onAfter : function(){ 
          flag = false; 
         } 
        }); 
        $current.removeClass('current'); 
        $prev.addClass('current'); 
       } 
      } else { 
       $next = $current.next(); 

       if ($next.length) { 
        flag = true; 
        $('body').scrollTo($next, 1000, { 
         onAfter : function(){ 
          flag = false; 
         } 
        }); 
        $current.removeClass('current'); 
        $next.addClass('current'); 
       } 
      } 

      event.preventDefault(); 
     });

그것은 마우스 휠을위한 스크립트입니다 :

내가 코드를했다. 그것은 일이지만, 내가 원하는 것만은 아닙니다. 섹션 # 2가 윈도우보다 크면 다음 섹션으로 스크롤 한 후에 자동으로 이동합니다. 나는 섹션 # 3을 마지막으로, 창보다 bigget과 내가 스크롤을 멈추는 것보다 아래로 스크롤을 작동합니다.

누군가 해결 방법을 알고 있었습니까?

HTML :

<section id='s1'></section> 
<section id='s2'></section> 
<section id='s3'></section> 
<section id='s4'></section>

JS :

출처

2013-12-20 Dominik Traskowski

그것은 데모없이 뭔가 말을하기 어렵다, 하지만 어디에서나 섹션 높이를 확인하지 않아도됩니다. 컨테이너 높이와 섹션 높이를 비교해야한다고 생각합니다. 섹션의 높이가 컨테이너 높이보다 높으면 스크롤의 기본값을 방지하지 않을 것입니다. – Tony

그것에 대해 생각하지만 섹션 높이를 확인하는 방법을 알지 못합니다. 또는 우리가 지금있는 곳. 나는 어떤 섹션의 높이를 확인하는 방법을 알고 있지만, 내가해야할 일은 무엇인가? –

귀하의 HTML 코드를 게시하시면 더 많은 도움을 드리겠습니다. –

내가 제대로 이해하면 다음과 같은 코드를 사용할 수 있습니다

function elementInViewport2(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top < (window.pageYOffset + window.innerHeight) && 
    left < (window.pageXOffset + window.innerWidth) && 
    (top + height) > window.pageYOffset && 
    (left + width) > window.pageXOffset 
); 
}; 

var current = $('section').first(); 
current.addClass('current'); 
var flag; 

$(window).scroll(function(event, delta) { 
    if (flag) { return false; } 

    var $body = $('body'), 
     $window = $(window), 
     newScroll = $body.scrollTop(); 

    if (!elementInViewport2(current[0])) { 
     current.removeClass('current'); 
     current[0] = null; 
    } 

    var newSection = $('section:not(.current)').filter(function(i, el) { 
     return elementInViewport2(el); 
    }).first(); 

    if (newSection[0] && current[0] != newSection[0]) { 
     current.removeClass('current'); 
     current = newSection; 
     newSection.addClass('current'); 
     flag = true; 
     $body.animate({scrollTop: newSection.offset().top}, function() { 
      flag = false; 
     }); 

     event.preventDefault(); 
    } 
});

Demo

출처

2013-12-20 03:03:10 Tony

한 페이지로 구성된 마우스 휠 navi - 섹션 끝 부분에서만 스크롤

답변

관련 문제