Javascript 根据滚动事件添加和删除类

我想根据用户是向下滚动还是向上滚动来添加和删除类。到目前为止，我在wheelDelta事件中尝试了这一点。没有滚动条，页面使用100vw和100vw，溢出隐藏。我想实现类似的目标：

HTML

因此，每当用户滚动时，我希望能够在每次有人向下或向上滚动时添加和删除类

例如，用户可以向下或向上滚动4次。并在操作列表中实际向上或向下（取决于滚动方向）

默认情况：情况0

向下滚动一次->情况1

再次向下滚动->情况2

但是如果用户现在向上滚动->将触发情况1

再次向下滚动->返回到情况2

再次向下滚动->情况3

到目前为止，我只在上下滚动时触发了一个事件，但仅此而已。例如：

$('body').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 > 0) {
              $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(0%)"});
      $(".logo-text").removeClass("hide-logo");
      $(".logo-img").removeClass("come-closer");
    }
    else{
      $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(100%)"});
      $(".logo-text").addClass("hide-logo");
      $(".logo-img").addClass("come-closer");
    }
});

---

使用计数器了解您所处的情况，例如：

var计数=1；
$（“body”）。在（'mouseweell'，函数（e）上{
如果（例如原始事件车轮增量/120>0）{
计数-=1；
}否则{
计数+=1；
}
如果（计数<1）计数=1；
如果（计数>4）计数=4；
开关（计数）{
案例1：
//做点什么
打破
案例2：
//做点什么
打破
案例3：
//做点什么
打破
案例4：
//做点什么
打破
}
//这只是一个有效的例子
$（“#包装器”）.attr（“数据幻灯片”，计数）；
});
正文{
保证金：0；
}
[数据幻灯片=“1”]{
背景色：红色；
}
[数据幻灯片=“2”]{
背景颜色：绿色；
}
[数据幻灯片=“3”]{
背景颜色：蓝色；
}
[数据幻灯片=“4”]{
背景颜色：橙色；
}
#包装纸{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}

哇，太棒了，谢谢！从中我们学到了很多。只有一个问题：我如何确保默认状态=计数1，并且向上滚动返回到1。现在，默认状态没有计数，只要您滚动它就会转到计数=1，但它不能返回计数=0。如果（计数<1）计数=1，这一行
确保计数器永远不会低于0。谢谢，我现在得到的正是我想要的。
#wrapper {
width:100vw;
height:100vh;
overflow:hidden;
}

$('body').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 > 0) {
              $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(0%)"});
      $(".logo-text").removeClass("hide-logo");
      $(".logo-img").removeClass("come-closer");
    }
    else{
      $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(100%)"});
      $(".logo-text").addClass("hide-logo");
      $(".logo-img").addClass("come-closer");
    }
});