javascript - 绑定(bind)到滚轮然后使用正常滚动

Question

我有 2 个 div，高度和宽度均为 100%。一个是top:0px，另一个是top 100%;

我想通过使用鼠标滚轮时开始的动画从一个转到另一个。它适用于我的代码。

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

但我想在输入第二个 div 时停止该脚本，然后像往常一样在页面的其余部分使用滚轮。 (其他整页 div)

我能做到

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

这很好用。但是现在我想让 wheel 脚本在我们到达 div“two”的顶部时再次运行。我尝试了条件，但我无法让它工作。

这是我的代码(您也可以在 this codepen 上看到它的工作原理):

$(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

这个解决方案并不漂亮，但它确实有效。当有人(或您自己)寻找更好的解决方案时，您可以将其用作解决方法。

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

您可以看到它在 this codepen 上工作.

您的初始代码是这样做的:

• 如果鼠标滚轮向下，向下滚动到 #two。
• 如果鼠标滚轮向上移动，向上滚动到 #one。

上面修改后的代码有点变化:

• 如果鼠标滚轮向下:
  • 如果您位于页面顶部 (#one)，请向下滚动到 #two。
  • 否则(您在 #two 或以下)，向下滚动给定数量。
• 如果鼠标滚轮向上移动:
  • 如果您在 #two，请向上滚动到 #one。
  • 如果您不在 #two(您低于该点)，请向上滚动给定数量。

我还添加了一些检查以避免出现问题:

1. 在滚动之前检查是否有动画 (TweenLite.to)。这是通过在 TweenLite 的 onStart 和 onComplete 事件上设置 animation 变量来实现的。
2. 如果向上滚动到 #two 上方，自动更正并转到 #two。仅当您滚动到页面底部然后向上滚动时才会发生此问题。