使用getBoundingClientRect检测元素视口位置返回值始终为0的问题

你的核心问题是只获取了一次元素的初始位置，没有在滚动时重新计算最新的视口位置。

你在页面加载阶段就执行了let bound = NavBar.getBoundingClientRect();，这个变量存储的是元素初始状态的位置数据，后续滚动页面时并没有更新它，所以打印的永远是第一次的结果，自然不会随滚动变化。

修改后的JavaScript代码 #

let NavBar = document.getElementById("xdd");

window.onscroll = function (){
    // 每次滚动时重新获取元素当前的视口位置
    let bound = NavBar.getBoundingClientRect();
    console.log("scrolled")
    console.log(bound)

    if(bound.top >= 0 && bound.bottom <= window.innerHeight) {
        console.log("元素完全在视口内")
    } else if(bound.top < window.innerHeight && bound.bottom > 0) {
        console.log("元素部分在视口内")
    } else {
        console.log("元素不在视口内")
    }
}

document.addEventListener("DOMContentLoaded", (event) =>{
    console.log("DOM加载完成");
})

修改说明 #

1. 将getBoundingClientRect()的调用移到onscroll事件处理函数内部，确保每次滚动时都能获取元素的最新位置。
2. 补充了完整的视口检测逻辑，覆盖元素完全在视口内、部分在视口内、完全不在视口内三种场景，可根据实际需求调整判断条件。

内容的提问来源于stack exchange，提问作者SpeedLight1221