Как я могу вызвать эффект onwheel вверх и вниз в javascript?

Question

Я хочу активировать функцию или l oop при прокрутке на колесе вверх или вниз. Пожалуйста, смотрите мой фрагмент.

let demo = document.querySelector('#demo');
let c = 0;
window.onwheel = function() {
  c ++;
  demo.innerHTML = c;
}

body{
height: 300vh;

}
h1{
position: fixed;
text-align: center;
width: 100vw;
}

<h1 id="demo" > Hello World </h1>

Мне нужно, когда он будет прокручиваться вверх, число должно увеличиваться, а когда число прокрутки должно уменьшаться. но это просто увеличение числа, мне нужно js ясное решение. Благодаря.

Answer 1

Вы можете использовать wheel прослушиватель событий и получить направление с помощью event.deltaY:

let demo = document.querySelector('#demo');
let c = 0;

window.addEventListener('wheel', function(event) {
  if (event.deltaY < 0) {
    console.log('scrolling up');
    if (c == 0) { // no negative values
      demo.innerHTML = 0;
    } else {;
      c--;
      demo.innerHTML = c;
    }
  } else if (event.deltaY > 0) {
    console.log('scrolling down');
    //if (c != 0) {
    c++;
    demo.innerHTML = c;
    // }
  }
});

body {
  height: 300vh;
}

h1 {
  position: fixed;
  text-align: center;
  width: 100vw;
}

<h1 id="demo"> Hello World </h1>

Answer 2

window.onwheel = function(event) {
  if (event.deltaY > 0) {
    // down
  } else {
    // up
  }
}

Answer 3

 var demoHeight = demo.offsetHeight; 
 demo.onscroll = function(){}

Answer 4

Вы также можете просто запомнить window.pageYOffset и проверить, прокручивали ли вы (должно быть больше, чем запомненное значение)

let demo = document.querySelector('#demo');
let c = 0;
let last_scroll= window.pageYOffset;
window.onwheel = function() {
  if(window.pageYOffset >= last_scroll && last_scroll != 0){
    c ++;
    demo.innerHTML = c;
  }
  last_scroll = window.pageYOffset;
}

body{
height: 300vh;

}
h1{
position: fixed;
text-align: center;
width: 100vw;
}

<h1 id="demo" > Hello World </h1>