父容器滚动时判断子元素是否在其可视区域内的实现方案

问题根源 #

你之前使用getBoundingClientRect等方法无效，是因为这些方法默认判断的是元素相对于浏览器整个视口的可见性，而你需要的是相对于父容器自身滚动可视区域的判断。

正确实现代码 #

替换你的JS部分内容为以下代码：

document.querySelector(".parent").onscroll = () => {
  const parent = document.querySelector(".parent");
  const targetMsg = document.getElementById("x");
  
  // 获取父容器与目标元素相对于浏览器视口的位置信息
  const parentRect = parent.getBoundingClientRect();
  const targetRect = targetMsg.getBoundingClientRect();
  
  // 计算目标元素相对于父容器内部的位置范围
  const targetRelativeTop = targetRect.top - parentRect.top;
  const targetRelativeBottom = targetRelativeTop + targetRect.height;
  
  // 父容器滚动可视区域的范围（相对于自身内容）
  const parentViewTop = parent.scrollTop;
  const parentViewBottom = parent.scrollTop + parent.clientHeight;
  
  // 判断目标元素是否与父容器可视区域有重叠（部分可见即判定为可见）
  const isVisible = targetRelativeBottom > parentViewTop && targetRelativeTop < parentViewBottom;
  
  // 切换背景色
  targetMsg.style.backgroundColor = isVisible ? "yellow" : "";
};

代码细节说明 #

• parent.getBoundingClientRect()：获取父容器边框相对于浏览器视口的位置和尺寸，用于计算子元素的相对位置
• targetRelativeTop：目标元素顶部相对于父容器内部顶部的距离，自动抵消了父容器的padding、边框等影响
• parent.scrollTop：父容器内容向上滚动的像素值，代表当前可视区域的顶部位置
• parent.clientHeight：父容器的可视高度（不含滚动条、边框），两者相加得到可视区域底部位置
• 可见性判断逻辑：只要目标元素的任何部分进入父容器可视区域，就判定为可见，反之则清空背景色

额外优化建议 #

• 如果需要判断完全可见而非部分可见，只需修改判断条件为：

  const isFullyVisible = targetRelativeTop >= parentViewTop && targetRelativeBottom <= parentViewBottom;
  

• 可以将判断逻辑封装成独立函数，方便复用多个目标元素的判断：

  function isElementVisibleInParent(child, parent) {
    const parentRect = parent.getBoundingClientRect();
    const childRect = child.getBoundingClientRect();
    const childRelativeTop = childRect.top - parentRect.top;
    const childRelativeBottom = childRelativeTop + childRect.height;
    return childRelativeBottom > parent.scrollTop && childRelativeTop < parent.scrollTop + parent.clientHeight;
  }
  

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