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

视图或者一个元素在滚动时,会触发元素的 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事件不生效的更多相关文章

  1. JQUERY 滚动 scroll事件老忘记 标记下

    制作笔记 这个scroll事件 老忘记.... 写的太垃圾了  希望有路过的大神指点的吧~ 这个貌似应该写个函数里 调用好些的吧~  写个类这样的 也方便扩展貌似  不过就是想想  ~ $(windo ...

  2. JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

    本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...

  3. window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.这时就要用window.attachEvent和window.addEventLi ...

  4. window.addEventListener绑定事件记得删除

    在做postMessage通信时,window.addEventListener绑定的事件记得要remove掉 就和setTime一样,不然占用内存资源

  5. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  6. vue 中scroll事件不触发问题

    在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...

  7. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  9. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  10. 前端高性能滚动 scroll 及页面渲染优化

    前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...

随机推荐

  1. 关于单元测试的那些事儿,Mockito 都能帮你解决

    摘要:相信每一个程序猿在写Unit Test的时候都会碰到一些令人头疼的问题:如何测试一个rest接口:如何测试一个包含客户端调用服务端的复杂方法:如何测试一个包含从数据库读取数据的复杂方法...这些 ...

  2. 想从单体架构演进到分布式架构,SBA 会是一个不错的选择

    摘要:SBA 可以看成是单体架构和微服务架构之间的一个折中方案,它也是按照业务领域进行服务划分,但服务划分的粒度相比微服务要更粗.从单体架构演进到 SBA,会比直接演进到微服务架构更加容易. 本文分享 ...

  3. vue3,对比 vue2 有什么优点?

    摘要:Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,Vue3在2020年正式推出,在源码和API都有较大变化,性能得到了显著 ...

  4. vue2.x老项目typescript改造过程经验总结

    前言: 关于Vue2.x 的TS改造,其实没有啥好说的. 对于vue-cli项目来说,从新跑一遍 vue create xxx-project ,选择Manually select features ...

  5. centos8 测地卸载php5.6 与卸载php7

    centos8 yum php 默认安装 php7.1.2 我想卸载php7 ,安装php5.6 yum remove php 无法彻底卸载干净.必须强制删除,使用下面命令查看全部php软件包 rpm ...

  6. 当OLAP碰撞Serverless,看ByteHouse如何建设下一代云计算架构

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 作为云计算的下一个迭代,Serverless 可以使开发者更专注于构建产品中的应用,而无需考虑底层堆栈问题.伴随着 ...

  7. 标注BIO-精灵标注助手

    目录 准备待标注数据 将待标数据生成文件 数据标注 下载标注软件 创建项目 标注数据 导出数据 ANN 转 BIO 推荐使用 Label Studio 准备待标注数据 创建 raw_data.txt ...

  8. C# CRC8

    C# CRC8 C# /// /// This enum is used to indicate what kind of checksum you will be calculating. /// ...

  9. Spring Cloud Alibaba 2.2.6发布:新增Nacos注册快速失败的配置

    7月12日消息,Spring Cloud Alibaba新版本2.2.6发布,该版本适配Spring Cloud Hoxton.SR9. 下面一起来看看该版本内容: 特性增强 Nacos 支持服务注册 ...

  10. JSP | Tomcat目录结构详解

    前排提醒:本文不涉及如何安装 Tomcat,仅分析Tomcat目录结构. Tomcat 版本:apache-tomcat-8.5.71 Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器 ...