针对元素内滚动的监控及延申 VUE

最新推荐文章于 2023-04-20 15:41:40 发布

净怡

最新推荐文章于 2023-04-20 15:41:40 发布

阅读量148

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/amberLJY/article/details/108435010

版权

1 篇文章 0 订阅

订阅专栏

写在前面：以往仅仅使用window.addEventListener(‘scroll’, function(){})就可以监控的滚动事件，面对元素内滚动则失效，故采用了比较极端的方式，如有更优解，欢迎交流

情景描述：监控元素内滚动，若超出一定范围，则显示回到顶部按钮，点击此按钮，元素回滚到自己的顶部。因按钮为多页面使用，所以我将按钮写为了子组件。情景如图

在这里插入图片描述

因父组件非最外层盒子，故监控scroll事件不成立，所以使用了mousewheel(鼠标滚动)事件，通过监控鼠标滚动事件，判断父组件距离屏幕顶部的距离，超出一定范围，向子组件传参使其显示
代码如图
父组件：
在这里插入图片描述
监控滚动发生事件：

子组件在父组件的写法

代码如图
在这里插入图片描述

点击事件

代码如图
在这里插入图片描述
完成

编写过程中，尝试使用ref属性监控滚动或鼠标滚动：

 this.$refs.index_main.addEventListener('scroll', this.scrollToTop)
 this.$refs.index_main.addEventListener('mousewheel', this.scrollToTop)

均失败，原因是ref并不是动态的，无法实时获取事件

关注

专栏目录