window监听scroll事件失效，window.addEventListener(‘scroll‘,callback)

最新推荐文章于 2024-05-29 15:58:49 发布
最新推荐文章于 2024-05-29 15:58:49 发布
阅读量6.3k 收藏 8
点赞数 5
文章标签： javascript html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41442929/article/details/110882093
版权
在尝试使用window.addEventListener('scroll', callback)监听页面滚动时遇到问题，回调函数未执行。解决方案是将CSS样式应用于页面顶层父元素，并直接监听该元素的滚动事件。详细步骤包括理解滚动事件发生的条件，分析滚动事件源，并正确设置监听对象。" 130823751,5564205,Python实现：OD统一考试字符串比较问题,"['字符串处理', '算法', 'Python编程', '编程竞赛', '滑动窗口算法']
摘要由CSDN通过智能技术生成

今天在写一个页面的时候需要监听页面的滚动

代码书写格式如下

window.addEventListener('scroll',callback)

发现不管怎么弄callback 函数都无法执行
后来问了部门的大佬才解决，现做一个记录

解决办法如下

{
   
	height:100%;
	overflow:scroll;
}

将上面的css样式放于需要监听的页面的顶层父元素身上，然后在获取该父元素的dom，监听其滚动即可

详细步骤如下

假如有如下dom页面

最低0.47元/天 解锁文章
Mountain-Z
关注
JS的防抖与节流
ge15139567650的博客
03-14 277
函数防抖： 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 防抖debounce代码： function debounce(fn, wait) { var timeout = null; return function() {
vue中window.addEventListener(‘scroll‘, xx)失效
最新发布
_NIXIAKF的博客
08-02 191
vue中window.addEventListener(‘scroll‘, xx)失效
onscroll监听不生效，scrollTop一直为0
a57521的博客
11-08 1440
scrollTop一直为0，监听页面滚动不触发
addeventlistener监听scroll跟touch(实例讲解)
12-04
这三个事件只在手机上生效 touchstart：手指开始触屏 touchmove：手指移动 touchend：手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture：事件是否用捕获事件，从外到里，true                         默认为false:使用冒泡事件，从里到外 optional:{      passive:false时，阻止默认事件，ture时不阻止默认事件(默认值是false) } passive:true可以防止
vue中给window添加滚动监听无效的解决方案
热门推荐
小圣贤君的博客
04-08 1万+
页面中有这么一个需求，当页面滚动到一定高度之后，页面中的某些元素进行吸顶，固定到顶部位置，或者是滚动到一定程度进行更新数据的操作。 我相信不少网友查阅过类似的资料，网友给出的解决方案，很多都是在mounted中添加 window.addEventListener("scroll", this.handleScroll); 采用这种形式来实现页面监听滚动的效果。 笔者最初也是采用了这种方...
vue自学,window.addEventListener不生效解决方案
yrldjsbk的博客
02-25 7362
自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。
监听滚动条页面时使用window时不生效
weixin_45776308的博客
12-08 593
在mounted生命周期里面加。
window.addEventListener在部分安卓手机不生效
weixin_56006480的博客
05-26 2328
事件的默认行为，导致无法正确触发滚动事件。可以尝试在事件处理函数中调用。可能会存在一些问题，主要是因为安卓手机浏览器的兼容性问题。安卓手机上的一些浏览器可能会阻止。，这个选项用来指定是否允许调用。方法传递了一个选项对象。在上面的代码中，我们给。
setup中写window.addEventListener
08-01
当你在setup中写`window.addEventListener('event-name', callback)`，意思是当指定的事件（如click、scroll等）发生时，会触发传入的回调函数`callback`。 例如： ```javascript // Vue.js 的 setup 例子 setup()...
vue 爬坑之路 - window.addEventListener('scroll'，xx）
Amen的博客
01-07 2334
因项目需求有一个滑动分页功能 因为js是单独抽离出来的，就有多个vue调用这个js 所以就发现了怎么跳转页面了，并且这个页面我没有调用页面滑动事件， 这个滑动加载下一页的功能还在执行 解决办法就是当前页用完了就及时销毁这个监听事件 ps： 我尝试过在执行完滚动事件的方法（getTabList(){}）之后就把滚动事件销毁了，但是我发现这个销毁了就再也加不上了。。 新手新手，可能是还能在...
js滚动条事件监听addEventListener、removeEventListener不生效
weixin_36931308的博客
07-12 1269
参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderlandEventTarget.removeEventListener - Web API 接口参考 | MDN
devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效，没有输出内容
右边疯子_的博客
05-29 520
问题：devicemotion 或者 deviceorientation 在window.addEventListener 事件中不生效，没有输出内容。2、必须用户手动点击click事件中调用。1、必须在Https协议下才可使用。
window.addEventListener('scroll', yourFunction)的问题
VVVZCS的博客
09-10 1万+
假如我们在一个页面中设置了window.addEventListener('scroll', this.handleScroll)，那么当我们使用路由跳转到其他页面的时候，可能就会仍停留在原来的位置，什么意思呢， 就是我们在A页面中滑动到比如距离Top500px的距离，这个时候在A页面的500px地方有一个路由可以跳转到B页面，B页面设置了window.addEventListener('scr...
js 滚动监听，核心方法
橙-极纪元-cplvfx-JJY.Cheng
03-08 2618
js 滚动监听，核心方法
vue中window.addEventListener(‘scroll‘, xx)失效解决办法
1
12-14 7432
多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true)
react监听页面滚动事件：window.addEventListener的scroll无效
lhz_19的博客
09-22 1万+
react监听页面滚动事件：window.addEventListener的scroll无效 在react项目中需要通过监听页面滚动高度，控制页面样式动态展示，所以在网上找了以后其他案例发现监听无效，代码如下： //在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.handleScroll); } //在componentWil
【uni-app】处理uni-app编译APP-PLUS window.addEventListener(‘message‘）不能使用问题
weixin_46027556的博客
02-02 7017
处理uni-app编译APP-PLUS 无法使用监听事件问题window.addEventListener('message'）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值