Treating Each Div As A "page" When Scrolling

I have a page that I'm building and I would like to make it that when I scroll (up or down) the page scrolls to the next div (each div is 100% the height of the window). And gets '

Solution 1:

Ok...

The relevant code for the Honda site can be found in http://testdays.hondamoto.ch/js/script_2.js. It seems to be doing some calculations to locate the top of the div then scroll to it. There are handlers for different types of scrolling.

Specifically, the movement is handled by function navigation(target)

the key bits is here...

$('html,body').stop().animate({
        scrollTop: $(target).offset().top + newMargin
    }, 1000,'easeInOutExpo',function(){
        //Lots of "page"-specific stuff
    }
});

There are handlers for the scroll types...

$('body').bind('touchstart', function(event) {
    //if(currentNav!=3){// jQuery clones events, but only with a limited number of properties for perf reasons. Need the original event to get 'touches'var e = event.originalEvent;
        scrollStartPos = e.touches[0].pageY;
    //}
});

//--Bind mouseWheel
$('*').bind('mousewheel', function(event, delta) {
    event.preventDefault();
    //trace('class : '+$(this).attr('class') + '   id : '+$(this).attr('id'));if(!busy && !lockScrollModel && !lockScrollMap){
        if(delta<0){
            nextPage();
        }else{
            prevPage();
        }
    }
});

You'll note that the navigate() function sets a busy flag which is unset when scrolling completes - which is how it suppresses all new scroll events during a scroll. Try changing the direction of scroll while the page is already scrolling and you'll notice user input is being ignored too.