激活每个滚动和增量 class

Question

我想在鼠标滚轮事件上创建一个自定义滑块，我的问题是如何在我的页面上完成每个滚动并在我的 'ul li' 上添加一个活动的 class 并递增它一一点赞：

if ($('scroll') === 1, function() {
  $('ul li:first-child').addClass('active');
});
if ($('scroll') === 2, function() {
  $('ul li:nth-child(2)').addClass('active');
});

ul li{
  height:20px;
  width:20px;
  background:blue;
  margin:5px;
  list-style:none
  }

ul li.active{
  background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 1

此语法无效：

if (value === other value, function() {

});

if 语句的正确语法如下：

if (value === other value) {
    // execute code in here
}

此外，您还有这个：

$('scroll') === 1

此处，$('scroll') 是一个 jQuery 函数，它选择 <scroll> HTML 元素（不存在）。

相反，您可以使用 window.scrollY 在 JavaScript 中检测页面的滚动位置，其中 returns the number of pixels that the document is currently scrolled down from the top。例如：

if (window.scrollY < 100) {
    $('ul li:first-child').addClass('active');
} else if (window.scrollY < 200) {
    $('ul li:nth-child(2)').addClass('active');
}

Answer 2

基于this answer:，你可以这样做：

var scrollable = $('ul li').length - 1,
  count = 0;
$('body').bind('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (scrollable >= count && count > 0) {
      $('.active').removeClass('active').prev().addClass('active');
      count--
    } else {
      return false;
    }
  } else {
    if (scrollable > count) {
      $('.active').removeClass('active').next().addClass('active');
      count++
    } else {
      return false;
    }

  }
})

ul li {
  height: 20px;
  width: 20px;
  background: blue;
  margin: 5px;
  list-style: none
}
ul li.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

激活每个滚动和增量 class

Get each scroll and increment active class

javascript

jquery

scroll

mousewheel