使用getBoundingClientRect实现滚动加载时移动端模拟环境数值偏差问题

问题根因 #

• 亚像素精度差异：getBoundingClientRect()返回的是包含亚像素的浮点数值，而移动端设备模拟场景下，window.innerHeight受设备像素比(DPR)缩放、模拟器视口渲染逻辑影响，会出现整数+零点几像素的差值，你用严格的小于判断就会刚好卡阈值失败
• 原判断逻辑本身容错性不足：你现有逻辑要求目标元素完全进入视口才触发加载，没有预留预加载的缓冲区间，遇到任何视口计算偏差就会失效

解决方案 #

方案1：优先使用Intersection Observer API（推荐） #

这是浏览器原生提供的交叉观测接口，自动处理精度、滚动性能、视口变化等各类边界问题，无需手动计算坐标：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 目标元素进入视口时触发加载
    if (entry.isIntersecting) {
      // 执行你的加载逻辑
      loadMoreContent()
      // 如果是单次触发加载可以先取消观测，加载完新内容后再观测新的底部元素
      observer.unobserve(entry.target)
    }
  })
}, {
  // 可以设置rootMargin预留预加载距离，比如提前100px触发加载，提升用户体验
  rootMargin: '100px 0px 0px 0px'
})
// 观测你作为底部判断的目标元素
observer.observe(element)

方案2：优化原有滚动判断逻辑 #

如果不想改动现有逻辑框架，只需修改判断条件，加入精度容错即可，无需设置25这么大的偏移量：

// 方法1：加入1px容错阈值，覆盖亚像素差
if (element.getBoundingClientRect().bottom < window.innerHeight + 1) {
  // 加载逻辑
}

// 方法2：统一取整后比较，消除浮点差
if (Math.floor(element.getBoundingClientRect().bottom) < Math.floor(window.innerHeight)) {
  // 加载逻辑
}

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