onwheel 和 onscroll 事件

onwheel

事件在鼠标滚轮在元素上下滚动时触发。同样可以在触摸板上滚动或放大缩小区域时触发（如笔记本上的触摸板）。

onscroll

事件在元素滚动条在滚动时触发。滚动条必须存在，否则不会触发。无论以那种方式，只要滚动条滚动，事件都会触发。元素（节点）内部的内容区发生滚动，就会触发该元素的滚动事件。
触发方式：鼠标滚轮，鼠标拖动，键盘上下键，或者设置的滚动函数，如 scrollTo，scrollBy，scrollByLines, scrollByPages。

当鼠标滚轮滚动时，onwheel事件先被触发，若滚动条滚动，则onscroll事件会相继被触发。

scroll事件的监听

1.监听整个页面的scroll事件

一般用 window 对象来监听整个页面的 scroll 事件：

window.addEventListener('scroll',function(event){
    console.log('scroll');
},false)

或者

window.onscroll = function(e) {
    console.log('scroll')
}

特殊情况，body元素 监听整个页面的 scroll 事件，只能是 DOM0 级事件处理（onscroll） 方式， 而 DOM2 级事件处理（addEventListener）无效
并且，IE不能监听body的滚动事件

document.body.addEventListener('scroll',function(event){
    console.log('scroll');  // 当鼠标滚动时不会打印
},false)

document.body.onscroll = function(e) {
    console.log('scroll')  // 当鼠标滚动时会打印，但 ie 也失效
}

获取到页面的滚动距离（隐藏的高度）: document.documentElement.scrollTop

2.监听其他页面元素的 scroll 事件

正常监听就好了

ele.onscroll = function(e) {
    console.log('scroll')
}
// 或者
ele.addEventListener('scroll',function(event){
    console.log('scroll');
},false)

scroll事件失效

https://juejin.cn/post/7209983180912181308