1 onscroll事件失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body onscroll="checkscroll()">
<div class="father" >
<div class="son">我是移動塊</div>
</div>
</body>
</html>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
/*overflow-x:hidden;*/
/*overflow: scroll;*/
}
.father {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.son {
height: 3000px;
background-color: yellow;
width: 100%;
font-size: 80px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script type="text/javascript">
function checkscroll() {
console.info(window.scrollY)
}
</script>
大家可以將這段代碼copy親自測試一下，在有和沒有overflow屬性之間切換，就明白了。
因為很多同學在開發項目時，會有腳手架之類的文件進行快速開發，但是有的腳手架會在入口的html文件，設置overflow: scroll／auto。
這個屬性在入口級別的文件中最好不要隨意使用，造成的scroll滑動監聽整體失效，你無論如何也不會想到是這個原因。
打個比方：
APP.vue
這是用vue.js寫的頁面，我在其中用了vux（一個基於vuejs的移動組件庫）的一個組件view-box,當時我找遍了所有的文件，並沒有那里
有over-flow 樣式；但是scroll事件失效，window.scrollY一直為0， 最后我發現所有頁面都是如此，於是我就定位在入口的幾個文件，將
相關的引入組件也進行排查，終於在view-box,這個組建里找到了over-flow：auto；樣式。注釋掉后，就正常了
所以說：over-flow：auto；如果放在入口文件並且放在包裹的父元素上，一定要慎重！
2 vue上監聽scroll事件
利用DOM二級監聽事件即可，
window.addEventListener('scroll',()=>{console.log(window.scrollY)})
3 如果問為什么不能在vue組件上直接監聽
一般來說根據我的測試情況，監聽滾動基本上監聽的都是整體document或者window。
監聽的都是相對於整體（document或者window）的當前可見區域的文檔片段（就是你眼睛可以看到的部分），而不是去監
聽單個的DOM片段，因為這么做沒有意義。在vue中也監聽不了！因為vue的每個文件實際上都是一塊DOM片段，你在自己
的身上監聽自己的滑動情況。這就好比（你想揪着自己的頭發，把自己提起來）！
當然，這是比較通俗一點，直觀一點的解釋，如果有更底層，更科學的解釋，一起探討！