!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>网站运维>vue中监听scroll事件失效的问题及解决(vue监听滚动事件)

vue中监听scroll事件失效的问题及解决(vue监听滚动事件)

vue项目中遇到需要监听页面某个元素距顶部距离实现吸顶效果,正常的window.addEventListener('scroll', this.handleScroll)完全失效,经过一段时间的探索发现这个事件在子组件中会遇到问题。

vue中监听scroll事件失效的问题及解决(vue监听滚动事件)

可以用元素上的 @scroll事件来监听滚动,但有一点要注意,scroll的元素需要确认 设置overflow-y:scroll;height:100%的样式。

下面附实现成功的代码

1.顶部元素添加 @scroll事件监听

2.确保监听的元素 overflow-y:scroll;height:100%

3.监听事件

可以在父元素中添加滚动,通过 this.$refs.goodsContainer.getBoundingClientRect().top来获取子元素的顶部距离进行判断

vue监听scroll事件

很小的功能,记录一下

给TA打赏
共{{data.count}}人
人已打赏
网站运维

vuepress打包部署踩坑及解决(vuepress搭建)

2022-10-10 21:57:56

网站运维

帝国CMS默认搜索关键词长度如何更改

2022-10-11 19:17:27

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索