快捷導(dǎo)航

vue中window.addEventListener(‘scroll‘,?xx)失效的解決

更新時(shí)間：2022年07月27日 10:06:54 作者：半開(kāi)半落

這篇文章主要介紹了vue中window.addEventListener(‘scroll‘,?xx)失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

window.addEventListener(‘scroll‘, xx)失效解決

多次嘗試都無(wú)法獲取到滾動(dòng)事件,后來(lái)加上true之后就可以了

window.addEventListener('scroll', this.clintHeight, true)

window.addEventListener scroll在移動(dòng)端無(wú)效問(wèn)題

在vue項(xiàng)目中有一個(gè)頁(yè)面滾動(dòng)的加載數(shù)據(jù)的事件，一開(kāi)始用window.addEventListener scroll在瀏覽器上調(diào)試時(shí)可以監(jiān)聽(tīng)到事件，但是在移動(dòng)端上無(wú)法監(jiān)聽(tīng)到scroll事件

window.addEventListener('scroll',()=>{?
? ?console.log("頁(yè)面滾動(dòng)事件")?
})

既然無(wú)法實(shí)現(xiàn)監(jiān)聽(tīng)功能就干脆把監(jiān)聽(tīng)事件綁定到dom元素上

<template> 
     <div id="pageId"> 
     </div> 
</template>

<script>
  mounted(){    
    let page = document.getElementById('pageId'); 
    page.addEventListener('scroll', this.pageScroll,true) 
  },
 
methods:{ 
  pageScroll(){ 
     console.log("scroll") 
  } 
} 
</script>

<style> 
   #pageId{ 
   height:100vh; 
   overflow-y:scroll 
 } 
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08
Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化，在實(shí)際的前端開(kāi)發(fā)過(guò)程中，動(dòng)態(tài)適配是一個(gè)非常重要的問(wèn)題，在數(shù)據(jù)可視化的場(chǎng)景下，圖表的動(dòng)態(tài)適配尤為重要，需要的朋友可以參考下
2023-05-05
通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令詳解
本文通過(guò)實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令,需要的朋友可以參考下
2018-06-06
vue使用AES.js的步驟詳解
AES對(duì)數(shù)據(jù)傳輸加密、解密處理---AES.js，下面分步驟給大家介紹vue使用AES.js的示例代碼，感興趣的朋友跟隨小編一起看看吧
2021-10-10
vue樹(shù)形結(jié)構(gòu)數(shù)據(jù)處理的方法總結(jié)
在項(xiàng)目開(kāi)發(fā)的過(guò)程中,會(huì)經(jīng)常使用樹(shù)形結(jié)構(gòu)數(shù)據(jù),前后端交互都會(huì)對(duì)數(shù)據(jù)進(jìn)行處理,后端返回的數(shù)據(jù)前端有的時(shí)候不能直接使用需要轉(zhuǎn)換,本文小編整理了一些項(xiàng)目中用到的處理方法,需要的朋友可以參考下
2023-11-11
vue3的自定義指令directives實(shí)現(xiàn)
本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
Vue3+Element?Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09