Vue 获取当前距离屏幕顶部的距离

<template>
    <div ref="obtain"></div>
<template/>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
    　　// 滚动条的获取
    　　window.addEventListener('scroll', this.handleScrollx, true)
   },
    methods: {
        handleScrollx() {
          console.log('滚动高度', window.pageYOffset)
          console.log('距离顶部高度', this.$refs.obtain.getBoundingClientRect().top)
        }
    }
}
</ script>

 

获取当前页面高度

export default {
    data() {
        return {
            // 页面高度
            screenHeight: document.body.clientHeight,
            // 计算出的高度
            PageHeight: ''
        }
    },
    created() {
       this.GetHeight()
    },
    methods: {
        GetHeight() {
            // 根据页面高度计算  (可以自定义逻辑)
            this.PageHeight = (this.screenHeight)
        }
    }
}