鼠标滚轮滚动触发scrollIntoView失效问题求助

问题出在两个核心点：

• 滚轮事件的默认滚动行为会和scrollIntoView的平滑滚动冲突，导致自定义滚动被浏览器的默认动作打断
• scrollActive设置为true后没有重置，触发一次就再也不会执行后续逻辑

修改后的完整代码 #

document.getElementById('next').addEventListener('click', function() {
  var target = document.getElementById('target')
  target.scrollIntoView({
    behavior: "smooth",
    block: 'nearest'
  });
})

var scrollActive

window.addEventListener("wheel", event => {
  // 阻止浏览器默认滚动行为，避免和自定义滚动冲突
  event.preventDefault();
  
  const delta = Math.sign(event.deltaY);

  if (!scrollActive) {
    scrollActive = true;

    if (delta == 1) {
      console.info(delta);
      var target = document.getElementById('target')
      target.scrollIntoView({
        behavior: "smooth",
        block: 'nearest'
      });
    }

    // 延迟重置scrollActive，确保平滑滚动完成后可再次触发
    // 时间可根据实际滚动时长调整，这里设为1000ms
    setTimeout(() => {
      scrollActive = false;
    }, 1000);
  }
});

.a {
  width: 50px;
  height: 250px;
  border: 1px solid #444;
  margin: 20px;
}

<a id="next" href="#">play next</a>

<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a" id="target">5</div>
<div class="a">6</div>
<div class="a">7</div>

关键修改说明 #

1. 添加event.preventDefault()：直接阻止浏览器的默认滚轮滚动，让scrollIntoView的平滑滚动可以正常执行，不会被打断。
2. 添加setTimeout重置scrollActive：因为平滑滚动需要时间完成，延迟一段时间后把状态改回false，这样下次滚轮滚动时还能触发逻辑。如果觉得1000ms不合适，可以根据实际滚动速度调整。

内容的提问来源于stack exchange，提问作者Toniq