【Vue】vue怎么监听某个 div的滚轮
vue怎么监听某个 div的滚轮事件,哪位大虾指点一下!
回答
封装在组件中 如下:
<template> <div class="scroll">
<div class="scroll-div-outer" id='scrollDiv'>
<div class="scroll-div-inner">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'scroll',
methods:{
checkDivScroolTop(){
//获取节点
var scrollDiv = document.getElementById('scrollDiv');
//绑定事件
scrollDiv.addEventListener('scroll', function() {
console.log(scrollDiv.scrollTop);
});
}
},
mounted(){
this.checkDivScroolTop();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.scroll-div-outer{
height: 200px;
width: 200px;
border: 1px solid #ccc;
overflow: auto;
}
.scroll-div-inner{
height: 600px;
width: 200px;
border: 1px solid #ccc;
}
</style>
额,知道了, v-on:scroll
可以用ref来获取这个节点,然后绑定addeventlistener来添加监听器,或者在div通过事件来监听v-on.......
mounted中监听,比如window.addEventListener('scroll', this.handleScroll);
然后beforeDestroy时候解除监听
window.removeEventListener("scroll", this.handleScroll)
以上是 【Vue】vue怎么监听某个 div的滚轮 的全部内容, 来源链接: utcz.com/a/74584.html