如何在JavaScript中触发上下滚动事件效果？

Question

我想在滚轮向上或向下滚动时触发一个函数或循环。请查看我的片段。

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>

我需要当页面向上滚动时数字应该递增，而当向下滚动时数字应该递减。但是它只是递增数字，我需要一个清晰的JavaScript解决方案。谢谢。

- NIKHIL CHANDRA ROY

---

可能是 https://dev59.com/SHI-5IYBdhLWcg3wj5FG 的重复问题。 - mccainz

你可以使用 addEventListener 来监听滚动事件。请查看文档，你会找到一个完整的示例：https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event - Kokodoko

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>

- Mara Black

Answer 2

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

- Stas Amasev

Answer 3

你也可以记住 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>

- john Smith

Answer 4

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

- user8651493