Question

我想根据用户是向下滚动还是向上滚动来添加和删除类。到目前为止，我尝试使用wheelDelta事件。没有滚动条，页面使用100vw和100vw，隐藏溢出。我想实现与此类似的东西：http://www.sound-of-change.com/#/intro/。

HTML

<div id="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
</div>

CSS

#wrapper {
width:100vw;
height:100vh;
overflow:hidden;
}

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

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

默认值：情况0

向下滚动一次 - ＆gt;情况1

再次向下滚动 - ＆gt;情况2

但如果用户现在向上滚动 - ＆gt;情况1将被触发

再次向下滚动 - ＆gt;回到情况2

再次向下滚动 - ＆gt;情况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");
    }
});

Answer 1

使用计数器知道你是哪种情况，如下所示：

＆＃13;

var count = 1;

$("body").on('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    count -= 1;
  } else {
    count += 1;
  }
  if (count < 1) count = 1;
  if (count > 4) count = 4;

  switch (count) {
    case 1:
      // do something
      break;
    case 2:
      // do something
      break;
    case 3:
      // do something
      break;
    case 4:
      // do something
      break;
  }

  // Just a example that it works
  $("#wrapper").attr("data-slide", count);
});

＆＃13;

body {
  margin: 0;
}

[data-slide="1"] {
  background-color: red;
}

[data-slide="2"] {
  background-color: green;
}

[data-slide="3"] {
  background-color: blue;
}

[data-slide="4"] {
  background-color: orange;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" data-slide="1"></div>

＆＃13;

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

1 个答案: