Javascript call scrollIntoView on scroll

Question

I woudl like to trigger scrollIntoView on mouse wheel scroll. This works when I click a button, but it seems while on scroll its not (even if I restrict it to just happenning one like in example below)

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

You should cancel the event mousewheel, but you need to add { passive: false } when attaching the event listener.

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>