뷰포트 JQuery 스크롤 섹션

Question

viewport jQuery 플러그인을 사용하여 HTML 섹션을 스크롤하는 데 문제가 있습니다. 페이지에 4 개의 섹션이 있으며 마우스 스크롤 (위 또는 아래) 중에 하나씩 스크롤하고 싶습니다.

<section id="chapter1-block" class="chapter"> 
<span id="chapter1" class="pointer"></span><span class="pointer-b"></span> 
</section> 

<section id="chapter2-block" class="chapter"> 
<span id="chapter2" class="pointer"></span><span class="pointer-b"></span> 
</section> 

<section id="chapter3-block" class="chapter"> 
<span id="chapter3" class="pointer"></span><span class="pointer-b"></span> 
</section> 

<section id="chapter4-block" class="chapter"> 
<span id="chapter4" class="pointer"></span><span class="pointer-b"></span> 
</section> 

JS : 내 HTML과 자바 스크립트 코드를 아래에서 언급

$(function() { 
    var _top = $(window).scrollTop(); 
    var _direction; 
    var curChapterPos = 'chapter1'; 
    $(window).scroll(function(){ 
     var _cur_top = $(window).scrollTop(); 
     console.log(curChapterPos); 
     if(_top < _cur_top) 
     { 
      if(curChapterPos == "chapter1") 
      { 
       $('body').scrollTo('#chapter2'); 
       curChapterPos = 'chapter2'; 
       console.log(_cur_top); 
       return false; 
      } 
      else 
      if(curChapterPos == "chapter2") 
      { 
       $('body').scrollTo('#chapter2'); 
       curChapterPos = 'chapter3'; 
       console.log('3--'+curChapterPos); 
       return false; 
      }else 
      if(curChapterPos == "chapter3") 
      { 
       $('body').scrollTo('#chapter3'); 
       curChapterPos = 'chapter4'; 
       console.log('3--'+curChapterPos); 
       return false; 
      }   
      _direction = 'down'; 
     } 
     else 
     { 
      _direction = 'up'; 
     } 
     _top = _cur_top; 
    }); 
}); 

Answer 1

브라우저에서 스크롤 막대를 사용하는 경우, 페이지 스크롤, 기능 7 번 호출 될 때 여기에서 문제는, . 열쇠를 내려 9 번. 마우스 휠을 사용하면이 기능이 12 번에서 25 번까지 호출됩니다. 따라서 마우스를 사용하지 않으면 문제가 해결 될 수 있습니다. 클라이언트/브라우저에서 마우스의 감수성이 다를 수 있기 때문입니다. 그러나 이것은 원래 질문을 해결하지 못합니다. 페이지 스크롤과 마우스를 가져 가면서 태그를 볼 수 있다면 필요한 답을 얻을 수 있습니다.

여기 내 부분적인 해결책입니다. 마우스 스크롤이 내려 가면 루프가 만들어집니다. 여행의 방향가 있지만

$(function() { 
    var _top = $(window).scrollTop(); 
    $("#xtop").val(0); 
    var _direction; 
    var curChapterPos = ''; 
    var _last = false; 

    $(window).scroll(function(){ 
     var _cur_top = $(window).scrollTop();   
     var _top = $("#xtop").val(); 
     curChapterPos = $("#chapterhidden").val(); 

     if(_top < _cur_top){    
      if(curChapterPos == "chapter1"){ 
       $('body').scrollTo('#chapter2'); 
       curChapterPos = 'chapter2'; 
       $("#chapterhidden").val(curChapterPos); 
      }else if(curChapterPos == "chapter2"){ 
       $('body').scrollTo('#chapter2'); 
       curChapterPos = 'chapter3';     
       $("#chapterhidden").val(curChapterPos);     
      }else if(curChapterPos == "chapter3"){ 
       $('body').scrollTo('#chapter3');     
       curChapterPos = 'chapter4'; 
       $("#chapterhidden").val(curChapterPos);     
      } else if(curChapterPos == "chapter4" && elementInViewport(document.getElementById('chapter3')) == false){     
       console.log("aquisss"); 
       $('body').scrollTo('#chapter4'); 
       curChapterPos = 'chapter4'; 
       $("#chapterhidden").val(curChapterPos); 
       $("#xtop").val(_cur_top+1000); 
      }else{ 
       return false; 
      } 
      _direction = 'down';    
      $("#xtop").val(_cur_top); 

     }else {    
      if(curChapterPos == "chapter4" && elementInViewport(document.getElementById('chapter4-block')) == false){     
       $('body').scrollTo('#chapter3'); 
       curChapterPos = 'chapter3'; 
       $("#chapterhidden").val(curChapterPos);     
      } else if (curChapterPos== "chapter3"){ 
       $('body').scrollTo('#chapter2'); 
       curChapterPos = 'chapter2'; 
       $("#chapterhidden").val(curChapterPos); 
      } else if (curChapterPos== "chapter2"){    
       $('body').scrollTo('#chapter1'); 
       curChapterPos = 'chapter1'; 
       $("#chapterhidden").val(curChapterPos); 
      } 
      _direction = 'up'; 
      $("#xtop").val(_cur_top); 
     }   
    }); 
}); 


function elementInViewport(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 && 
    left >= window.pageXOffset && 
    (top + height) <= (window.pageYOffset + window.innerHeight) && 
    (left + width) <= (window.pageXOffset + window.innerWidth) 
); 
} 

마지막 위치를 입력

http://jsfiddle.net/manueru_mx/Wm6Pn/

은 결코 조건을 입력합니다. 그래서 끝자리에 1000을 더합니다. 이것은 사이클을 생성하고 처음부터 시작할 수있게합니다. 그것은 잘못이지만 행동에서 논리를 찾을 수 없습니다. 흥미롭게도 마지막 위치에서만 발생합니다.

호환성보기로 FF 16 및 IE 8에서 테스트되었습니다. 마우스 스크롤, 키 다운 및 브라우저 스크롤 막대와 함께 작동합니다.

이 플러그인을 사용하는 것이 더 쉬울 것입니다. http://www.appelsiini.net/projects/viewport

하지만 초기 접근 방식을 많이 변경하지는 않겠습니다. 나는 당신이 그 기능을 사용하여 볼 수 있기 때문에 라이브러리 scrollTo를 사용하고 jQuery를에

http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

희망이 도움

참조 네이티브되지 않습니다 : ElementInViewPort function