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

工作正常。但是现在，当我们到达div的顶部时，我想让轮子脚本重新工作，并且＃34;两个＆＃34;。我尝试了条件，但我无法使其发挥作用。

这是我的代码（您也可以在this codepen上看到它的工作原理）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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的animation和onStart事件上设置onComplete变量，可以实现这一目标。
如果向上滚动，请高于#two，自动更正并转到#two。只有当您滚动到页面底部然后向上滚动时才会出现此问题。

绑定到滚轮然后使用普通滚动

1 个答案: