通过 Chrome devtools，我如何知道哪些元素正在主动滚动？

问题描述

长话短说，Vue 在调试组件内的高度和 @scroll 问题时需要一些技巧。就我而言，最好的行动呼吁是找到正在滚动的元素并将滚动移动到子元素。

那么，如何在不添加/删除无数事件侦听器的情况下找到正在滚动的元素？

解决方法

您可以通过使用 event.target 传递给滚动处理程序的滚动事件获取正在滚动的元素。我在下面包含了一个片段，希望对您的案例有帮助。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",methods: {
    scrollHandler(ev) {
      console.log(ev.target.id);
    }
  }
});

#app > div > div {
  height: 200px;
  overflow-y: scroll;
  max-height: 100px;
  display:block;
}

h1 {
font-size: 3rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div :id="i" v-for="i in 5" :key="i" @scroll="scrollHandler">
      <h1>{{i}}</h1>
    </div>
  </div>
</div>