Binding to the scroll wheel then use normal scroll

Question

I have 2 div with height and width of 100%. one is top:0px and the other is top 100%;

I want to go from one to the other one with an animation which start when I use the mousewheel. it worked fine with my code.

$(window).bind('mousewheel DOMMouseScroll', function(event){
   if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
       TweenLite.to(window, 2, {scrollTo:{y:$( "#one").offset().top}});
   } else {  
       TweenLite.to(window, 2, {scrollTo:{y:$("#two").offset().top}});  
   }
}

But I want to stop that script when I enter in the second div and then use the wheel as usual for the rest of the page. ( other full pages div)

So I can do

....
else {  
    TweenLite.to(window, 2, {scrollTo:{y:$("#two").offset().top}}); 
    $(window).unbind(); (but i dodn't know if it's really ok )
}

That works fine. But now I would like to make the wheel script work again when we reach the top of the div "two". I tried with conditions but i couldn't make it work.

This is my code (you can also see it on this codepen where it works):

$(window).bind('mousewheel DOMMouseScroll', function(event){
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    TweenLite.to(window, 2, {scrollTo:{y:$( "#one").offset().top}, ease:Expo.easeOut});
  }
  else {  
    TweenLite.to(window, 2, {scrollTo:{y:$( "#two").offset().top}, ease:Expo.easeOut});
  }
});

body{overflow:hidden}
#one {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background:#733;
}
#two {
  position: absolute;
  width: 100%;
  height: 90%;
  left: 0;
  top: 100%;
  z-index: 1;
  background:#439;
}
#three {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 190%;
  z-index: 1;
  background:#896;
}

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Answer 1

This solution is not pretty, but it works. You could use it as a workaround while somebody (or yourself or myself) look for a better solution.

var animation = false;
var scrollby = 20;

$(window).bind('mousewheel DOMMouseScroll', function(event){
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    if ($( "#two").offset().top == $(window).scrollTop()) {
      TweenLite.to(window, 2, {scrollTo:{y:$( "#one").offset().top}, ease:Expo.easeOut, onComplete:function() { animation=false; }, onStart: function(){ animation=true; } });
    } else {
      if (!animation){
        if ($(window).scrollTop() - scrollby < $( "#two").offset().top) {
          $(window).scrollTop($( "#two").offset().top);
        } else {
          window.scrollBy(0,-scrollby);
        }
      }
    }
  }
  else { 
    if ($(window).scrollTop() == 0) {
      TweenLite.to(window, 2, {scrollTo:{y:$( "#two").offset().top}, ease:Expo.easeOut, onComplete:function() { animation=false; }, onStart: function(){ animation=true; }});
    } else { 
      if (!animation) {window.scrollBy(0,scrollby);}
    }
  }
});

You can see it working on this codepen.

Your initial code did this:

• If the mousewheel goes down, scroll down to #two.
• If the mousewheel goes up, scroll up to #one.

The modified code above changes a bit:

• If the mousewheel goes down:
  • If you are at the top of the page (#one), scroll down to #two.
  • Or else (you are in #two or below), scroll down a given amount.
• If the mousewheel goes up:
  • If you are at #two, then scroll up to #one.
  • If you are not at #two (you are below that point), scroll up a given amount.

I also added a couple of checks to avoid issues:

1. Check if there is an animation (TweenLite.to) going on before scrolling. This is achiveved by setting the animation variable on the onStart and onComplete events of TweenLite.
2. If scrolling up you go above #two, autocorrect and go to #two. This issue only happens when you scroll to the bottom of the page and then scroll up.