绑定到滚轮然后使用正常滚动

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（您低于该点），请向上滚动指定数量。

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

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

绑定到滚轮然后使用正常滚动

Binding to the scroll wheel then use normal scroll

javascript

jquery

css

gsap