Javascript在滚动时调用scrollIntoView

Question

我想在鼠标滚轮滚动时触发scrollIntoView。当我单击按钮时，这会起作用，但在滚动时似乎不起作用（即使我将其限制为仅发生如下例所示的情况）

document.getElementById('next').addEventListener('click', function() {

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

var scrollActive

window.addEventListener("wheel", event => {



  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'
      });

    }

  }


});

.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>

Answer 1

您应该取消事件

mousewheel

，但在附加事件监听器时需要添加

{ passive: false }

。

document.getElementById('next').addEventListener('click', function() {
  my_action()

})



addEventListener('mousewheel', (event) => {
  event.preventDefault()
  my_action()
}, { passive: false });


function my_action() {
  // console.log("scroll")
  var target = document.getElementById('target')
  target.scrollIntoView({
    behavior: "smooth",
    block: 'nearest'
  });
}

.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>