-
Vue
开发,有时候只需要监听某个元素是否滚动就行了,不需要去监听整个页面。 -
Vue
有自带的@scroll
但是并没有什么用,给某个滚动元素加上,滚动该元素并不会调用,加上CSS
支持滚动样式也一样。 -
怎么监听呢?通过
addEventListener
与@mousewheel
配合实现-
addEventListener
: 增加的是拖拽滚动条也能监听到滚动 -
@mousewheel
:添加的是非拖拽滚动条滚动,比如在元素上鼠标或者触摸板滚动。
<template> <!-- 滚动视图 --> <div class="scrollview" ref="scrollview" @mousewheel="scrollChange"> <!-- 内容区域 --> <div class="content"></div> </div> </template> <script> 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('滚动中') } } } </script> <style scoped> .scrollview { height: 100px; overflow-y: auto; background-color: yellow; } .content { height: 500px; background-color: red; } </style>
-
-
案例效果
Vue 监听某个元素滚动,亲测有效
最新推荐文章于 2024-07-24 03:12:57 发布