window.addEventListener注册滚动scroll事件不生效

简介: window.addEventListener注册滚动scroll事件不生效

先了解一下滚动事件触发的条件

视图或者一个元素在滚动时,会触发元素的 scroll 事件。
备注: 在 iOS UIWebViews 中,滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。
只要某一个元素在滚动,就可以注册滚动事件。
ps:滚动事件不一定要注册的 window 上, 可以注册在document上,或者某一个具体的元素上。
滚动事件不一定要注册的 window 上, 可以注册在document上,或者某一个具体的元素上。

window.addEventListener('scroll', xxx方法) 不被触发的原因

今天在做项目的时候,需要做一个滚动的效果。
发现在
mounted(){    
  window.addEventListener('scroll', this.pageScroll) 
}
中注册的滚动事件没有生效。觉得真的很神奇。
我之所以觉得神奇,是因为之前是可以滚动触发的。

解决的办法

第1种: 添加上true
mounted(){    
  window.addEventListener('scroll', this.pageScroll,true) 
}
第2种:查看父级元素是否有overflow:scroll;overflow:auto; 将他们去除。
虽然去除是可以解决的。但是这不是影响滚动事件不被触发的原因。这个是一个表现
第3种:注册在document上
mounted(){    
  document.addEventListener('scroll', this.pageScroll,true) 
}
第4种:如果document上都不触发的话;
4.1 查看是否达到触发的条件。
4.2 注册在一个具体的元素上(这个元素要达到滚动的条件)

无法移除滚动事件

1. 因为事件是注册 document 上的。我移除的时候是 document 上移除的,发现不生效
我又在window 上移除了。结果生效了。神奇~!

尾声

我知道这肯定是哪里影响了。才会出现这些神奇的现象。
我本来想找到本质的原因。
但是后来花了很多时间,还是没有找到原因。就简单记录一下。
希望对小伙伴有用~

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
20天前
|
JavaScript 前端开发
点击事件中的this|click事件与change事件|v-model
点击事件中的this|click事件与change事件|v-model
16 0
|
6月前
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
106 0
|
小程序 Android开发 网络架构
uni-app中使用scroll-view滚到底部时多次触发scrolltolower
uni-app中使用scroll-view滚到底部时多次触发scrolltolower
1105 0
uni-app中使用scroll-view滚到底部时多次触发scrolltolower
|
9月前
|
容器
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
831 0
|
3月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
11月前
|
小程序
微信小程序scroll-view组件设置 scroll-top无效问题解决
微信小程序scroll-view组件设置 scroll-top无效问题解决
678 0
|
JavaScript
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1109 0
js监听页面或元素scroll事件,滚动到底部或顶部
|
Java Android开发 C++
Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
235 0
|
开发者
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
431 0
|
JavaScript
VUE element-ui之Dialog对话框关闭事件
VUE element-ui之Dialog对话框关闭事件
2103 0
VUE element-ui之Dialog对话框关闭事件