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

最新推荐文章于 2024-09-08 16:39:42 发布

前端初学者0518

最新推荐文章于 2024-09-08 16:39:42 发布

阅读量1.3k

点赞数

分类专栏： JavaScript Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/rb0518/article/details/126850196

版权

Vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

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

方法一：

必须给外面的盒子加一个 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>