<template>
<div ref="scroll">
<div v-for="item in 20" :key="item">{{item}}</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
created() {
},
mounted() {
window.addEventListener("scroll", this.handleScrollx,true);
},
methods: {
handleScrollx(){
console.log('滚动高度',window.pageYOffset);
console.log('距离顶部高度',this.$refs.scroll.getBoundingClientRect().top);
},
},
//离开页面时一定要销毁不然会出问题
beforeDestroy(){
window.removeEventListener("scroll",this.handleScrollx)
}
};
</script>
<style lang="scss" scoped>
</style>
VUE_vue实时监听元素距离顶部高度
最新推荐文章于 2024-07-24 03:12:57 发布