animate 및 scrollTop을 사용하여 스크롤 할 때 브라우저 창의 스크롤 막대 또는 div 스크롤 막대를 어떻게 설정합니까?

Question

내가 디자인하고있는 사이트의 일반적인 개념은 메뉴 항목의 내용을 수평으로 그리고 점진적으로 확대 (크기 및 pt 크기 증가) 할 수있는 정적 div 아래로 스크롤하는 것입니다. 나는 정말 magnify 부분에 도움이 필요하지 않습니다. 왜냐하면 나는 정적 div 아래에있는 menuItem div에 mag 클래스를 추가하는 것만 큼 간단하다고 생각하기 때문입니다. 나는 몇 주 동안이 덤비는 된 나는 점진적으로, 지금까지, 스크롤이 코드는 이것이다 : 같은 스냅 플러그인 등 :

$(document).ready(function() { 

    currentScrollPos = $('#scrollableDiv').scrollTop(120); //sets default scroll pos 


    /*The incrementScroll function is passed arguments currentScrollPos and UserScroll which are variables that i have initiated earlier in the program, and then initiates a for loop. 
     -The first statement sets up the variables: nextScrollPos as equal to the currentScrollPos(which by default is 120px) plus 240px(the distance to next menuItem), prevScrollPos as equal to the currentScrollPos(which by default is 120px) minus 240px(the distance to next menuItem). 
     -The second Statement checks to see if the user has scrolled using var userScroll 
     -The third statement sets: var CurrentScroll equal to the new scroll position and var userScroll to false*/ 

    function incrementScroll(currentScrollPos, userScroll) { 
     for (var nextScrollPos = parseInt(currentScrollPos + 240, 10), 
     prevScrollPos = parseInt(currentScrollPos - 240, 10); //end first statement 
     userScroll == 'true'; console.log('dude'), //end second statement and begining of third 
     currentScrollPos = scrollTop(), userScroll = 'false') { 


      if (scrollTop() < currentScrollPos) { 
       $('#scrollableDiv').animate({ 
        scrollTop: (parseInt(prevScrollPos, 10)) 
       }, 200); 
       console.log('scrolln up') 
      } else if (scrollTop() > currentScrollPos) { 
       $('#scrollableDiv').animate({ 
        scrollTop: (parseInt(nextScrollPos, 10)) 
       }, 200); 
       console.log('scrolln down')//fire when 
      } 

     } 
    } 

    $('#scrollableDiv').scroll(function() { 
     userScroll = 'true'; 
     _.debounce(incrementScroll, 200); //controls the amount of times the incrementScroll function is called 
     console.log('straight scrolln') 
    }); 
}); 

나는 거의 가까운 다양한 솔루션을 발견했다 다음 또는 이전 div 가로로 demo, 또 다른 솔루션은 스냅하고 setTimeout demo을 기반으로하지만 손톱을 점진적으로 div를 스크롤하는 것은 아닙니다. 또한 사용자가 위의 코드에 포함 된 debounce를 사용하여 menuItem을 스크롤하는 속도를 제어하는 ​​방법을 발견했습니다.

jsfiddle에서 코드를 데모 할 때 루프 내의 console.logs가 실행되지 않아 문제가 루프 내에 있다고 생각하게됩니다. 나는 문법이나 다른 곳에서는 코드의 다른 부분에있을 수 있기 때문에 멍청하다. 또한 두 번째 데모에서는 CSS를 가로 정적 div에 제공했지만 HTML로 변환하면 js가 작동하지 않습니다.

플러그인을 사용하는 대신 코드를 작성하고 싶습니다. 도움을 받으실 수 있습니다! 또한 미리 감사드립니다.

Answer 1

시도 this 피들. 메뉴 컨테이너 높이는 960 픽셀이며 4 개의 메뉴 항목을 표시합니다. "줌"div는 꼭대기에 위치합니다. 이 div 위로 마우스를 이동하면 메뉴 항목이 위/아래로 이동합니다. 마지막 3 개의 메뉴 항목으로 스크롤 할 수 있도록 하단에 div를 추가해야했습니다. JS 코드 :

jQuery(document).ready(function($){ 

    var current = 0; 
    var menu = $('.menu-container').scrollTop(0); 
    var items = menu.find('.menu-item'); 
    var zoom = $('.zoom'); 


    function isVerticalScroll(event){ 
     var e = event.originalEvent; 
     if (e.axis && e.axis === e.HORIZONTAL_AXIS) 
      return false; 
     if (e.wheelDeltaX) 
      return false; 
     return true; 
    } 

    function handleMouseScroll(event){ 
     if(isVerticalScroll(event)){ 
      var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; 
      current += (delta > 0 ? 1 : -1); 

      if(current < 0) 
       current = 0; 
      if(current >= items.length){ 
       current = items.length - 1; 
      } 

      menu.stop().animate({ 
       "scrollTop": current * 240 
      }, 300); 

      items.removeClass('current').eq(current).addClass('current'); 

      event && event.preventDefault(); 
      return false; 
     } 
    } 

    zoom.on({ 
     "MozMousePixelScroll": handleMouseScroll, 
     "mousewheel": handleMouseScroll 
    }); 
}); 

희망이 있습니다.