Question

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 “fixed” there until you scroll again. An example of what I’m trying to accomplish can be seen here:

http://testdays.hondamoto.ch/

You will notice that when you scroll down, it automatically moves you to the next “div”.

What I’ve tried:

• Using the jQuery .scroll event combined with:

      function updatePosition() {
        if(canScroll) {
          var pageName;
          canScroll = false;
          var st = $(window).scrollTop();
          if (st > lastScrollTop){
             // downscroll code
             if(pageNumber < 7) {
                 pageNumber++;
             }
             pageName = '#' + getPageToScrollTo().id;
             $('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
                 canScroll = true;
             });
          } else {
            // upscroll code
            if(pageNumber > 0) {
                pageNumber--;
            }
            pageName = '#' + getPageToScrollTo().id;
            $('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
                 canScroll = true;
              });
          }
          lastScrollTop = st;
        }
      }
  

But the scroll event was getting called when the page was scrolling (animating), AND when the user scrolled. I only need it to be called when the user scrolls.

Then I added:

var throttled = _.throttle(updatePosition, 3000);

$(document).scroll(throttled);

From the Underscore.js library – but it still did the same.

Finally, I browsed here a bit and found:

Call Scroll only when user scrolls, not when animate()

But I was unable to implement that solution. Is there anyone that knows of any libraries or methods to get this working?

EDIT:
Solution based on Basic’s answer:

  function nextPage() {
        canScroll = false;
        if(pageNumber < 7) {
            pageNumber++;
        }
        pageName = getPageToScrollTo();
        $('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
            canScroll = true;
        });
    }

    function prevPage() {
        canScroll = false;
        if(pageNumber > 0) {
        pageNumber--;
      }
      pageName = getPageToScrollTo();
      $('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
         canScroll = true;
      });
    }

    //--Bind mouseWheel
    $(window).on(mousewheelevt, function(event) {
        event.preventDefault();
        if(canScroll){
          if(mousewheelevt == "mousewheel") {
              if (event.originalEvent.wheelDelta >= 0) {
                prevPage();
              } else {
                nextPage();
              }
          } else if(mousewheelevt == "DOMMouseScroll") {
              if (event.originalEvent.detail >= 0) {
                nextPage();
              } else {
                prevPage();
              }
          }
        }
    });

Answer 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.