如何在触发事件时逐个为NodeList元素添加classList类？

嘿，我懂你想要的效果——每次触发鼠标滚动事件时，依次给div.about-slide元素逐个添加上scroll类，而不是一次性把所有元素都加上，对吧？你的现有代码里，addOnScroll函数的for循环会在每次调用时遍历所有元素，直接一次性全加类，这就是为啥达不到逐个添加的原因。

咱们可以通过一个外部计数器来跟踪当前应该处理哪个元素，具体修改方案如下：

首先，在全局（或者函数作用域内）声明一个变量来记录当前处理到的索引，初始值设为0：

var slide = document.querySelectorAll('div.about-slide');
// 新增计数器，记录当前要处理的元素索引
var currentSlideIndex = 0;

然后修改addOnScroll函数，让它每次只处理当前索引对应的元素，处理完后把计数器加1（还要注意不要超出元素总数的边界）：

function addOnScroll() {
  // 先检查是否还有未处理的元素
  if (currentSlideIndex < slide.length) {
    console.log('正在给第' + currentSlideIndex + '个元素添加scroll类');
    slide[currentSlideIndex].classList.add('scroll');
    // 计数器自增，下次处理下一个元素
    currentSlideIndex++;
  } else {
    console.log('所有元素都已经添加过scroll类啦');
  }
}

你的onDocumentMouseScroll函数不需要大改，保持原来的调用逻辑就行，每次触发向下滚动时调用addOnScroll，就会逐个处理元素了：

// 记得要声明lastMouseWheelStep变量哦，比如初始值设为0
var lastMouseWheelStep = 0;

function onDocumentMouseScroll( event ) {
  console.log(event);
  if( Date.now() - lastMouseWheelStep > 600 ) {
    lastMouseWheelStep = Date.now();
    var delta = event.detail || -event.wheelDelta;
    if( delta > 0 ) {
      navigateNext();
      addOnScroll(); // 每次向下滚动就处理下一个元素
    } else if( delta < 0 ) {
      navigatePrev();
      // 如果需要向上滚动时移除类，可以在这里类似逻辑处理，比如currentSlideIndex--后移除
      // if (currentSlideIndex > 0) {
      //   currentSlideIndex--;
      //   slide[currentSlideIndex].classList.remove('scroll');
      // }
    }
  }
}

逻辑说明 #

• 初始时currentSlideIndex为0，第一次触发向下滚动时，给第0个元素加类，然后索引变成1；
• 第二次触发向下滚动时，给第1个元素加类，索引变成2，以此类推；
• 当索引等于slide.length时，就不再执行添加操作，避免出现索引越界的问题。

如果需要支持向上滚动时逐个移除类，可以参考代码里注释的部分，调整计数器并调用classList.remove即可~

内容的提问来源于stack exchange，提问作者The Equine Gate Keeper