How can I set my browser window's scrollbar or a div scrollbar to scroll in increments using animate and scrollTop?

Question

The general idea to the site i am designing is to scroll through a set of menu items horizontally and incrementally underneath a static div that will magnify(increase dimensions and pt size) the contents of a menu items. I don't really need help with the magnify portion because i think it's as simple as adding a mag class to any of the menuItem divs that go underneath the static div. I have been messing with this for a few weeks and the code I have for incrementally scrolling, so far, is this:

   $(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')
    });
});

I have found a variety of solutions that are nigh close: such as a plugin that snaps to the next or previous div horizontally demo, another solution that also snaps and is based on setTimeout demo, but nothing that nails incrementally scrolling through divs. I also found a way to control the rate at which a user may scroll through the menuItems using debounce which is included in the above code.

The console.logs inside the loop do not fire when I demo the code in jsfiddle which leads me to believe the problem lies within the loop. I'm a noob though so it could be in syntax or anywhere else in the code for that matter. Also in the second demo, i have provided the css for the horizontal static div, but the moment I put it in my html it keeps the js from working.

I would like to write the code instead of using a plugin and any help would be appreciated! Also, thank you ahead of time!

Answer 1

Try this fiddle. Menu container height is 960px to show 4 menu items. "Zoom" div is positioned absolutely at top. When you scroll mouse over this div, menu items shifts to top/bottom. I had to add additional div to bottom to be able to scroll to last 3 menu items. JS code:

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
    });
});

Hope it will help.