getBoundingClientRect()获取元素的大小及其相对于视口的位置

getBoundingClientRect() 是 JavaScript 中的一个方法，主要用于获取元素的大小及其相对于视口的位置。这个方法返回的是一个 DOMRect 对象，该对象包含了元素的 top、right、bottom、left、width 和 height 属性。

具体来说：

• top: 元素上边距离视口上边的距离（像素值）。
• right: 元素右边距离视口左边的距离（像素值）。
• bottom: 元素下边距离视口上边的距离（像素值）。
• left: 元素左边距离视口左边的距离（像素值）。
• width: 元素的宽度（像素值）。
• height: 元素的高度（像素值）。

这个方法特别有用，因为它考虑了元素的滚动位置、边框、填充和任何 CSS 转换。这使得它成为确定元素在屏幕上的确切位置以及它的大小的有效方法。

// 控制动画的类名
let ifAnimationRight: any = ref(0)

// 监听滚动事件来获取元素距离视口顶部的距离
const updateScrollDistance = () => {
    nextTick(() => {
        const el = document.querySelector('#bottomTop') as HTMLElement
        const top = el.getBoundingClientRect().top

        if (top + 500 < innerHeight) {

            ifAnimationRight.value = 1
        }

    })
};

// 在组件挂载时添加滚动事件监听器  
onMounted(() => {
    window.addEventListener('scroll', updateScrollDistance);
    // 初始化时也获取一次距离  
    updateScrollDistance();
});

// 在组件卸载时移除滚动事件监听器  
onUnmounted(() => {
    window.removeEventListener('scroll', updateScrollDistance);
});