onscroll事件沒有響應的緣由以及vue.js中添加onscroll事件監聽的方法

時間 2019-11-08

標籤 onscroll 事件沒有響應緣由以及 vue.js vue 添加監聽方法欄目 JavaScript 简体版

原文原文鏈接

1 onscroll事件失效

<!DOCTYPE html>
<html>javascript

<head>
　　<meta charset="utf-8">
</head>css

<body onscroll="checkscroll()">
　　<div class="father" >
　　　　<div class="son">我是移動塊</div>
　　</div>
</body>html

</html>
<style type="text/css">
html,
body {
　　width: 100%;
　　height: 100%;
　　/*overflow-x:hidden;*/
　　/*overflow: scroll;*/
}vue

.father {
　　width: 100%;
　　height: 100%;
　　box-sizing: border-box;
}java

.son {　　測試

　　height: 3000px;
　　background-color: yellow;
　　width: 100%;
　　font-size: 80px;
　　display: flex;
　　justify-content: center;
　　align-items: center;flex

}
</style>
<script type="text/javascript">
　　function checkscroll() {　　
　　　　console.info(window.scrollY)
　　}
</script>spa

你們能夠將這段代碼copy親自測試一下，在有和沒有overflow屬性之間切換，就明白了。code

由於不少同窗在開發項目時，會有腳手架之類的文件進行快速開發，可是有的腳手架會在入口的html文件，設置overflow: scroll／auto。htm

這個屬性在入口級別的文件中最好不要隨意使用，形成的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片斷，你在本身

的身上監聽本身的滑動狀況。這就比如（你想揪着本身的頭髮，把本身提起來）！

固然，這是比較通俗一點，直觀一點的解釋，若是有更底層，更科學的解釋，一塊兒探討！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。