I want to trigger a function or loop when onwheel scroll up or scroll down. Please see my snippet.

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>

I want to trigger a function or loop when onwheel scroll up or scroll down. Please see my snippet.

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>

I need when it will scroll up the number should be increment and when scroll down number should be decrements. but it's just increment the number, I need js clear solution. Thanks.

• javascript
• arrays
• loops

• possible duplicate of stackoverflow./questions/1795734/… – mccainz Commented Jan 28, 2020 at 14:54
• You can use addEventListener for scroll events. Please check the documentation, you’ll find a plete example : developer.mozilla/en-US/docs/Web/API/Document/scroll_event – Kokodoko Commented Jan 28, 2020 at 14:55

4 Answers 4

You can use wheel event listener and get the direction with 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>

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

You could also just remember window.pageYOffset and check if you actually scrolled down (must be greater than remembered value)

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>

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