How can I trigger onwheel event up and down effect in javascript?

Question

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.

possible duplicate of https://stackoverflow.com/questions/1795734/triggering-onclick-event-using-middle-click — mccainz, Jan 28 '20 at 14:54
You can use `addEventListener` for scroll events. Please check the documentation, you’ll find a complete example : https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event — Kokodoko, Jan 28 '20 at 14:55

score 4 · Answer 1 · answered Jan 28 '20 at 14:55

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>

score 2 · Accepted Answer · answered Jan 28 '20 at 14:54

2

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

answered Jan 28 '20 at 14:54

Stas Amasev

399
2
3
9

john Smith · Answer 3 · 2020-01-28T15:03:09.603

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>

score 0 · Answer 4 · edited Jan 29 '20 at 02:27

0

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

edited Jan 29 '20 at 02:27

Kevin

16,549
8
60
74

answered Jan 28 '20 at 15:01

How can I trigger onwheel event up and down effect in javascript?

4 Answers4