Início / coding / Perguntas / 78321821
Accepted
Toniq
Asked: 2024-04-14 03:42:10 +0800 CST

Chamada Javascript scrollIntoView na rolagem

  • 772

Gostaria de acionar o scrollIntoView na rolagem da roda do mouse. Isso funciona quando clico em um botão, mas parece que durante a rolagem não (mesmo que eu restrinja apenas acontecer um, como no exemplo abaixo)

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>

javascript

1 respostas

  1. Best Answer

    Você deve cancelar o evento mousewheel, mas precisa adicioná-lo { passive: false }ao anexar o ouvinte do evento.

    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>

    • 0

relate perguntas