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

Question

我正在設計的站點的總體思路是在靜態div下方水平滾動地瀏覽一組菜單項，該菜單會放大（增加尺寸和pt大小）菜單項的內容。 我真的不需要放大部分的幫助，因為我認為這就像將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 演示 ，另一個解決方案也可以捕捉並基於setTimeout 演示 ，但是沒有什么可以逐步滾動div了。 我還找到了一種方法，該方法可以使用上述代碼中包含的反跳來控制用戶滾動菜單項的速率。

當我在jsfiddle中演示代碼時，不會觸發循環內的console.logs，這使我認為問題出在循環內。 我是一個菜鳥，所以可以用語法或代碼中的其他任何方式。 同樣在第二個演示中，我為水平靜態div提供了CSS，但是當我將其放在html中時，它使js無法正常工作。

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

Answer 1

試試這個小提琴。 菜單容器的高度為960像素，可顯示4個菜單項。 “縮放” div絕對位於頂部。 當您在該div上滾動鼠標時，菜單項將移至頂部/底部。 我必須在底部添加其他div才能滾動到最后3個菜單項。 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
    });
});

希望它會有所幫助。