vue 无法监听scroll事件

最新推荐文章于 2024-11-13 21:37:31 发布
最新推荐文章于 2024-11-13 21:37:31 发布
阅读量2.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38258327/article/details/86711759

大家好，在使用过程中发现一个问题，就是在一个组件上监听scroll事件无效，有滚动操作也没有触发。

后面想到了一个解决方法：就是在mounted钩子里绑定addEventListener事件，废话不多说，直接上代码

这样就能监听到scroll的事件了

向往这个代码对您有帮助

使用vue.js在页面内组件监听scroll事件的方法
10-18
本文将介绍如何在Vue.js中实现页面内组件监听scroll事件的功能。 首先，需要明确的是，当我们在页面中监听滚动事件时，一般情况下我们会想到使用JavaScript的`window.addEventListener`方法来添加滚动事件监听器。...
Vue如何实现监听组件原生事件
10-15
在Vue框架中，监听组件原生事件是一种常见的需求，特别是在处理复杂交互时。Vue提供了多种方式来监听这些事件，包括使用`.native`修饰符。本篇文章将深入探讨如何在Vue中实现监听组件的原生事件，以及如何在实际案例...
vue3滚动条scroll监听事件无效和scrollTop一直为0的问题
m0_75121871的博客
11-13 2345
虽然过程有些不清不楚的。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
vue为啥监听不了@scroll
m0_59157023的博客
07-02 729
事件冒泡：滚动事件可能被封装在某些组件内部，导致不会冒泡到父元素上。绑定scroll事件的div容器应该有overflow 可以滚动的。哈喽 大家好 我在vue中写了一个滚动scroll监听事件。然后滚动鼠标 发现进不来我的方法断点。正确绑定到了可滚动容器上。属性，使得元素不可滚动。事件绑定错误：确保你使用。组件内部没有正确地设置。
vue上监听scroll事件 无效
ljj890的博客
04-10 4025
vue上监听scroll事件 无效的原因 1.window.addEventListener(“scroll”, this.handleScroll); 2. handleScroll(){ var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; scr...
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
vue子组件监听滚动事件
weixin_42100978的博客
03-06 1366
页面中是一个父组件中嵌套一个子组件列表,我在子组件中监听页面滚动,使用以下代码，一直监听不到滚动事件。
关于v-show和v-if遇到better-scroll出现错误的解决
纸月四的博客
12-05 677
v-show和v-if 今天在写一个项目时，遇到了一个问题。使用了 better-scroll 来做页面滚动，首页进入后可以滚动，但是点击搜索框后出现搜索记录却无法滚动。查看 scroll 的打印发现 hasVerticalScroll: false，并且 scrollerHeight 和 clientHeight 都是 0，那就是都没有获得高度。最后把 v-show 改成 v-if 就可以了。 问题出现原因： 众所周知，v-show渲染了dom，只是把dom的style设置为：display:none ，
监听滚动条页面时使用window时不生效
weixin_45776308的博客
12-08 711
在mounted生命周期里面加。
vue监听scroll的坑
weixin_33743703的博客
09-06 1207
最近开始用vue写个小项目，踩了不少坑，这里记录下爬坑过程，给有同样经历的人帮助。 问题 今天想在vue的项目里面用下拉加载，然后就直接写了: 但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，然后我想到使用了vue-router做的spa项目，window对象不变的，所以需要在每次使用后销毁。 解决办法 我回...
vue监听scroll事件无效？（踩坑记录）
Dark_programmer的博客
01-11 3962
前端使用技术为VUE 踩坑记录 最近在项目里，因为需要监听滚动事件，就直接写监听代码如下： 尝试一、 html: <div id="scroll-div" @scroll="scrollHandle"> 监听我的滚动 <div> js: scrollHandle() { console.log("scrolll"); }, 但是事件并没有执行。于是想通过addEventListener原生的方式进行监听。将代码写入mounted 尝试二、 html: moun
解决vue的滚动条监听事件无效 解决vue的滚动条scrollTop距离总是为0无效问题
i_am_a_div的博客
12-30 3789
话不多说 直接上代码（方法可以直接复制拿去， html部分需要改成你的元素的ref和点击回到顶部的方法名称） html <section ref="scrollbox" class="inner-body"> <div> 这里放了很多内容 出现了滚动条 </div> </section> <button @click="gotop">点击置顶&
vue3怎么监听页面的滚动
热门推荐
m0_51636525的博客
10-19 1万+
监听滚动的hook
vue @scroll监听滚动条事件，解决不生效问题
weixin_43205308的博客
04-23 3399
1、单纯加 @scroll并不生效 <Row @scroll="loadMore"> 2、在配置@scroll同时在mounted加上一下方法 mounted(){ window.addEventListener('scroll',this.loadMore,true) }, 3、loadMore方法可以自己定义 loadMore: function (e) { console.log(e) } 4、通过以上可以顺利监听滚动条监听事件
vue中监听scroll事件失效的问题及解决。
weixin_47404583的博客
09-23 1981
因为我写的div 只是window内部的一个小元素，所以，需要向下捕获才可以。vue中监听scroll事件失效的问题及解决。无法监听到滚动的事件，不打印console。vue 监听scroll 事件也不生效。对于这个问题解释一下这三个参数吧。
vue真机上监听scroll事件失效
qq_39235090的博客
11-09 1781
真机监听scroll事件失效
vue2 监听scroll绑定
最新发布
03-19
首先，用户提到参考了两个引用，其中一个是关于使用window.addEventListener来监听scroll事件，另一个是在mounted钩子中使用document.querySelector绑定指定区域的滚动事件。用户的需求是在Vue2中实现类似的功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值