如何循环滚动事件

时间:2017-12-05 17:41:05

标签: javascript jquery

我的问题可能很简单。如何循环这个功能? 现在,滚动事件只能工作一次。我正在寻找解决方案如何启用其他功能(平滑滚动从红色div到蓝色div)

这是js代码:

var o = true;

if (o === true) {
$('div').scroll(function () {
        if(o){
      $('div').animate({
          scrollTop: $("#red").offset().top
      }, 1000);
      o=false;
     }
});
} 

else {
$('div').scroll(function () {
        if(o === false ){
      $('div').animate({
          scrollTop: $("#blue").offset().top
      }, 1000);
      o=true;
     document.write(o);
    } 
});
}

HTML + CSS + JS: https://jsfiddle.net/g2jafoay/6/

我正在寻找的东西:当你向下滚动时,会有动画将你带到红色div。所以,我想添加动画,在向上滚动后将你带到蓝色div

1 个答案:

答案 0 :(得分:1)

记住执行代码的时间。那就是:当它到达时。

我们可以将您的代码简化为

let a = true;
if (a) {
  functionA();
} else {
  functionB();
}

显然,当我们到达此代码时,functionA将被执行。我们从不执行functionB,因为,此代码永远不会再执行。

使用这些信息,并查看您的代码,我们发现您只附加了第一个滚动处理程序,它具有滚动到红色div的行为。滚动处理程序在每个滚动事件上执行。如果你像现在一样成功执行你的代码,你最终会得到无数个滚动处理程序,试图滚动到红色div和无数个滚动处理程序,试图滚动到蓝色div。

我们想要做的只是创建一个滚动处理程序,它在处理程序中包含所有相关逻辑。或者,换句话说,决定是在滚动处理程序而不是周围的代码中进行的。

let onRed = true;
$('div').on('scroll', () => {
  let scrollTarget;
  if (onRed) {
    scrollTarget = $('#blue');
  } else {
    scrollTarget = $('#red');
  }

  $('div').animate({
    scrollTop: scrollTarget.offset().top
  }, 1000);
  onRed = !onRed;
});