vue监听scroll事件无效？（踩坑记录）

Vue监听滚动事件踩坑记录
最新推荐文章于 2024-11-13 21:37:31 发布
原创 最新推荐文章于 2024-11-13 21:37:31 发布 · 3.9k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

该博客记录了前端使用Vue技术时的踩坑经历。在项目中监听滚动事件，直接写监听代码事件未执行，后尝试用原生方式监听，经资料查询发现监听参数不止两个，加上第三个参数后实现了监听。

前端使用技术为VUE

踩坑记录

最近在项目里，因为需要监听滚动事件，就直接写监听代码如下：

尝试一、

html:

<div id="scroll-div" @scroll="scrollHandle">
监听我的滚动
<div>

js:

scrollHandle
最低0.47元/天 解锁文章
vue 固定div 滚动_Vue - 让水平滚动条(scroll bar)固定在浏览器的底部
weixin_33124479的博客
02-05 4070
效果踩坑经历TLDR;在几个小时的google和stack overflow的苦苦搜索后，无果。经过自我思考，想到了一种实现方法：整个页面是一个盒子，要出现滚动条，必然里面的元素要溢出。也即是，元素水平overflow，那么就出现水平滚动条。元素垂直overflow，那么会出现垂直滚动条。我原先是将眼光放在局部的小盒子(如下图)，无论我怎么调整display或者overflow，当这个局部的元素溢...
Vue + elementUI使用中总结，包括踩坑（更新中）
是日前端
11-11 2807
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
vue 监听scroll事件无效
A873054267的博客
08-14 466
1 监听的dom元素设定高度，子元素的内容要超过容器的高度 2 设定overflow为:auto/scroll，默认值为visible，无法触发
vue中监听scroll事件失效的问题及解决。
weixin_47404583的博客
09-23 2082
因为我写的div 只是window内部的一个小元素，所以，需要向下捕获才可以。vue中监听scroll事件失效的问题及解决。无法监听到滚动的事件，不打印console。vue 监听scroll 事件也不生效。对于这个问题解释一下这三个参数吧。
vue监听scroll的坑
weixin_33743703的博客
09-06 1214
最近开始用vue写个小项目，踩了不少坑，这里记录下爬坑过程，给有同样经历的人帮助。 问题 今天想在vue的项目里面用下拉加载，然后就直接写了: 但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，然后我想到使用了vue-router做的spa项目，window对象不变的，所以需要在每次使用后销毁。 解决办法 我回...
vue中监听scroll事件失效的问题
折月的博客
08-21 4142
vue项目中遇到需要监听页面某个元素距顶部距离实现吸顶效果，正常的window.addEventListener('scroll', this.handleScroll)完全失效，经过一段时间的探索发现这个事件在子组件中会遇到问题。 可以用元素上的 @scroll事件来监听滚动，但有一点要注意，scroll的元素需要确认 设置overflow-y:scroll；height:100%的样式。 下面附实现成功的代码： 1.顶部元素添加 @scroll事件监听 <div class="specialt
uniapp踩坑细节
baidu_41601048的博客
03-26 1041
解决办法（1）给scroll-view设置如下css样式 （2）给scroll-view设置enhance属性和:show-scrollbar="false" 2 uniapp中定义全局变量需要在根目录的uni.scss文件中定义，通过main.js中引入自定义的scss文件不会编译生效 ps: scss文件中定义自定义函数如果带单位的话，需要做如下修改：
初探uni-app框架 踩坑
ZJW222的博客
07-22 999
近些天有接触到uni-app框架，使用HBuilderX软件进行编译，能生成多端项目文件，如微信、百度、支付宝小程序及Android和ios端，记录遇到的问题 1.条件编译 我觉得比较突出的一点功能，就是这个条件编译，指定对应的代码执行在对应的一端 #ifdef：if defined 仅在某平台存在 #ifndef：if not defined 除了某平台均存在 如：只在微信小程序中才执行的...
【VUE】在vue中使用@scroll监听滚动事件，@scroll无效问题解决！
热门推荐
李小白的博客
06-22 4万+
在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){})我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。我认为使用document.addEventListener会破坏vue的统一性，对我这种有轻微代码强迫症的人来说，让我感觉很不爽。而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并...
vue监听scroll的坑的解决方法
08-29
主要介绍了vue监听scroll的坑的解决方法，现在分享给大家，也给大家做个参考，希望给有同样经历的人帮助
vue使用使用@scroll监听滚动事件时，监听滚动事件时，@scroll无效问题的解决方法
qq_49173190的博客
04-07 1892
vue使用使用@scroll监听滚动事件时，监听滚动事件时，@scroll无效问题的解决方法
vue为啥监听不了@scroll
m0_59157023的博客
07-02 785
事件冒泡：滚动事件可能被封装在某些组件内部，导致不会冒泡到父元素上。绑定scroll事件的div容器应该有overflow 可以滚动的。哈喽 大家好 我在vue中写了一个滚动scroll监听事件。然后滚动鼠标 发现进不来我的方法断点。正确绑定到了可滚动容器上。属性，使得元素不可滚动。事件绑定错误：确保你使用。组件内部没有正确地设置。
vue上监听scroll事件 无效
ljj890的博客
04-10 4033
vue上监听scroll事件 无效的原因 1.window.addEventListener(“scroll”, this.handleScroll); 2. handleScroll(){ var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; scr...
vue中better-scroll中页面滚动无效的问题，已解决！
weixin_41033048的博客
03-08 2678
一开始的代码是这样子的，怎么调都无效： &lt;script&gt; import BScroll from 'better-scroll' export default{ name: "CityList", mounted(){ this.scroll = new BScroll(this.$refs.wrapper); co...
vue @scroll监听滚动条事件，解决不生效问题
weixin_43205308的博客
04-23 3452
1、单纯加 @scroll并不生效 <Row @scroll="loadMore"> 2、在配置@scroll同时在mounted加上一下方法 mounted(){ window.addEventListener('scroll',this.loadMore,true) }, 3、loadMore方法可以自己定义 loadMore: function (e) { console.log(e) } 4、通过以上可以顺利监听滚动条监听事件
vue3滚动条scroll监听事件无效和scrollTop一直为0的问题
最新发布
m0_75121871的博客
11-13 2473
虽然过程有些不清不楚的。
Vue中实现页面上滑加载更多，用@scroll监听滚动事件，解决@scroll无效问题
卡洛背心的博客
12-08 2224
在处理移动端的业务中，遇到需要页面滑动到底部加载更多数据的需求。下面就是个人实现加载更多功能的具体思路和踩坑详解。 第一步：先给div内容添加滚动事件 <template> <div class="content" @scroll="scrollCon"> <ul> <li></li> …… <li></li> </ul> </div> <template>
el-table下拉加载踩坑 添加滚动监听无效
caijiJ_jpg的博客
08-09 1132
必须固定table表头才能监听到滚动！元素上设置height属性即可。
Vue事件监听与计算属性实践解析
"本文主要探讨了Vue.js中的事件监听，包括计算属性的get和set方法以及methods和computed的性能对比。通过示例代码详细解析了这些概念，旨在帮助读者理解和应用在实际项目中。" 在Vue.js中，事件监听是构建用户交互...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值