1200字范文 > Vue指令v-on 的scroll滚动事件无效的解决办法

Vue指令v-on 的scroll滚动事件无效的解决办法

时间：2018-12-07 07:36:53

方法一：

必须给外面的盒子加一个overflow-y: scroll;

结构如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.outer {height: 200px;background-color: cadetblue;overflow-y: scroll;}.content {height: 600px;background-color: saddlebrown;}</style></head><body><div id="app"><div class="outer" @scroll="scrolling"><div class="content"></div></div></div><script src="../js/vue3.js"></script><script>Vue.createApp({methods: {scrolling(e) {console.log(6);console.log(e);},},}).mount("#app");</script></body></html>

方法二：利用@mousewheel和addEventListener

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.outer {height: 100px;overflow-y: auto;background-color: yellow;}.cc {height: 500px;width: 400px;background-color: saddlebrown;}</style></head><body><div id="app"><div class="outer" ref="outer" @mousewheel="changeing"><div class="cc"></div></div></div><script src="../js/vue3.js"></script><script>Vue.createApp({mounted() {console.log(this.$refs.outer);// 第三个参数为true时就是捕获，从上到下// 为false时就是冒泡，从下到上this.$refs.outer.addEventListener("scroll", this.changeing, true);},methods: {changeing() {console.log("changeing");},},}).mount("#app");</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。