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 上移除了。结果生效了。神奇~!
尾声
我知道这肯定是哪里影响了。才会出现这些神奇的现象。
我本来想找到本质的原因。
但是后来花了很多时间,还是没有找到原因。就简单记录一下。
希望对小伙伴有用~
window.addEventListener注册滚动scroll事件不生效的更多相关文章
- JQUERY 滚动 scroll事件老忘记 标记下
制作笔记 这个scroll事件 老忘记.... 写的太垃圾了 希望有路过的大神指点的吧~ 这个貌似应该写个函数里 调用好些的吧~ 写个类这样的 也方便扩展貌似 不过就是想想 ~ $(windo ...
- JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...
- window.addEventListener来解决让一个js事件执行多个函数
可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.这时就要用window.attachEvent和window.addEventLi ...
- window.addEventListener绑定事件记得删除
在做postMessage通信时,window.addEventListener绑定的事件记得要remove掉 就和setTime一样,不然占用内存资源
- vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- vue 中scroll事件不触发问题
在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 前端高性能滚动 scroll 及页面渲染优化
前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...
随机推荐
- 百万奖池角逐,华为云IoT边缘带你看懂“边缘计算开发者大赛”
摘要:2022年9月1日,第二届边缘计算开发者大赛正式启动. 2022年9月1日,第二届边缘计算开发者大赛正式启动! 本届大赛由华为云参与承办,中国信息通信研究院.工业互联网产业联盟.边缘计算产业联盟 ...
- 华为云企业级Redis揭秘第17期:集群搭载多DB,多租隔离更降本
摘要:GaussDB(for Redis)支持真正可扩展的多DB,轻松实现降本增效. 本文分享自华为云社区<华为云企业级Redis揭秘第17期:集群搭载多DB,多租隔离更降本>,作者: G ...
- 云图说|分布式事务管理DTM:“买买买”背后的小帮手
摘要:分布式事务管理DTM通过提供高性能.高可靠.低侵入等核心价值,可以更好的帮助企业应对微服务场景带来的一致性问题. 本文分享自华为云社区<[云图说]第224期 分布式事务管理DTM,&quo ...
- 谁说count(*) 性能最差,我需要跟你聊聊
摘要:当我们对一张数据表中的记录进行统计的时候,习惯都会使用 count 函数来统计,但是 count 函数传入的参数有很多种,比如 count(1).count(*).count(字段) 等.到底哪 ...
- PPT 合并形状
形状格式 -> 插入形状 -> 合并形状 选中的元素,就是要保留的元素. 可以到 https://www.iconfont.cn/ 下载SVG格式插入 PPT中进行使用 合并开状的应用 文 ...
- C++ lambda 内 std::move 失效问题的思考
最近在学习 C++ Move 时,有看到这样一个代码需求:在 lambda 中,将一个捕获参数 move 给另外一个变量. 看似一个很简单常规的操作,然而这个 move 动作却没有生效. 具体代码如下 ...
- warning: LF will be replaced by CRLF in public/tinymce/langs/zh_CN.js
windows使用git时出现:warning:LF will be replaced by CRLF windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时 ...
- python毕业设计选题15例,马上要毕业啦,大家做好准备了没
Hi,大家好,大四的同学马上要开始毕业设计啦,大家做好准备了没! 学长给大家详细整理了最新的python计算机毕设相关选题,对选题有任何疑问,都可以问学长哦. 1. 网上商城系统 这是一个基于pyth ...
- 结构体中ElementType的使用
1.问题 在定义结构体时,对于元素值,为什么喜欢使用ElementType而不是直接使用int或者char等等? 2.结论 对于int get_result(int x); 和 int get_res ...
- 【C】《C专家编程》阅读体会
[来源]https://mp.weixin.qq.com/s/0kmN5knql4yrOuUcnebwIQ