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)