Vue中scroll事件监听失效，如何排查并修复？

本文共计289个文字，预计阅读时间需要2分钟。

目录 + window.addEventListener('scroll', xx) 失效解决方案 + 移动端 window.addEventListener('scroll') 无效问题 + window.addEventListener('scroll', xx) 失效解决方案 + 多次尝试都无法获取到滚动事件，后来加上 true 后即可 + wind

目录

• window.addEventListener(‘scroll‘, xx)失效解决
• window.addEventListener scroll在移动端无效问题

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

多次尝试都无法获取到滚动事件,后来加上true之后就可以了

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

window.addEventListener scroll在移动端无效问题

在vue项目中有一个页面滚动的加载数据的事件，一开始用window.addEventListener scroll在浏览器上调试时可以监听到事件，但是在移动端上无法监听到scroll事件

window.addEventListener('scroll',()=>{     console.log("页面滚动事件")  })

既然无法实现监听功能就干脆把监听事件绑定到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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。