如何設置我的瀏覽器窗口的滾動條或div滾動條使用動畫和scrollTop以增量方式滾動？

Question

我正在設計的網站的一般想法是水平滾動瀏覽一組菜單項，並在靜態div下遞增，這將放大（增加尺寸和pt大小）菜單項的內容。我並不需要magnify部分的幫助，因爲我認爲這很簡單，只需將一個mag類添加到靜態div下面的任何menuItem div即可。我一直在搞亂這幾個星期，我有逐步滾動，到目前爲止，代碼是這樣的：

$(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。我還找到了一種方法來控制用戶可以使用上面代碼中包含的去抖動來滾動menuItem的速率。

當我在jsfiddle中演示代碼時，循環內的console.logs不會觸發，這導致我相信問題存在於循環中。我是一個noob，儘管如此，它可能在語法或代碼中的其他任何地方。另外在第二個演示中，我提供了水平靜態div的CSS，但是當我把它放在我的html中時，它使js無法工作。

我想寫的代碼，而不是使用插件和任何幫助，將不勝感激！另外，提前謝謝你！

Answer 1

嘗試this小提琴。菜單容器高度爲960px，以顯示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 
    }); 
}); 

希望它能幫上忙。