如何解决通过 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。