VUE_vue实时监听元素距离顶部高度

<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>