Vue 监听某个元素滚动，亲测有效

2023-09-21 07:43| 来源: 网络整理| 查看: 265

Vue 开发，有时候只需要监听某个元素是否滚动就行了，不需要去监听整个页面。

Vue 有自带的 @scroll 但是并没有什么用，给某个滚动元素加上，滚动该元素并不会调用，加上 CSS 支持滚动样式也一样。

怎么监听呢？通过 addEventListener 与 @mousewheel 配合实现

addEventListener: 增加的是拖拽滚动条也能监听到滚动

@mousewheel：添加的是非拖拽滚动条滚动，比如在元素上鼠标或者触摸板滚动。

export default { mounted () { // 获取指定元素 const scrollview = this.$refs['scrollview'] // 添加滚动监听，该滚动监听了拖拽滚动条 // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调 scrollview.addEventListener('scroll', this.scrollChange, true) }, // beforeDestroy 与 destroyed 里面移除都行 beforeDestroy () { // 获取指定元素 const scrollview = this.$refs['scrollview'] // 移除监听 scrollview.removeEventListener('scroll', this.scrollChange, true) }, methods: { // 滚动监听 scrollChange () { console.log('滚动中') } } } .scrollview { height: 100px; overflow-y: auto; background-color: yellow; } .content { height: 500px; background-color: red; }

案例效果

【本文地址】

公司简介

联系我们