如何循环滚动事件

Question

我的问题可能很简单。如何循环这个函数？ 现在，滚动事件只工作一次。我正在寻找如何启用 else 功能的解决方案（平滑滚动从红色 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

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