如何判断div的底部区域是否在视口viewport中可见？

基于全局浏览器视口的判断公式 #

首先获取两个核心参数：

• 目标div相对于视口的位置信息：const rect = 目标DOM元素.getBoundingClientRect()
• 当前视口的有效高度：const viewportHeight = window.innerHeight || document.documentElement.clientHeight

你要求忽略div上半部分的可见/遮挡状态，仅判断底部是否在视口内，只要满足div的底部边界落在视口的上下边界区间内即可，公式如下：

rect.bottom >= 0 && rect.bottom <= viewportHeight

公式返回true则代表div底部在视口内可见，返回false则不可见。

特殊场景：div在自定义滚动父容器内的判断公式 #

如果div是放在可滚动的父容器内，需要判断的是底部是否在父容器的可视区域内，参数和公式调整为：

• 子div的相对视口位置：const childRect = 子div.getBoundingClientRect()
• 父滚动容器的相对视口位置：const parentRect = 父滚动容器.getBoundingClientRect()

childRect.bottom >= parentRect.top && childRect.bottom <= parentRect.bottom

补充说明 #

如果需要判断的是底部的某块区域（比如底部30px高度的区域）而非底部单条边界，只需要调整公式的左边界即可，示例如下（判断底部30px区域是否可见）：

(rect.bottom - 30) >= 0 && rect.bottom <= viewportHeight

实际使用示例 #

// 监听全局滚动事件，判断目标div底部可见性
window.addEventListener('scroll', () => {
  const targetDiv = document.querySelector('#你的div选择器')
  const rect = targetDiv.getBoundingClientRect()
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
  const isBottomVisible = rect.bottom >= 0 && rect.bottom <= viewportHeight
  // 此处写后续业务逻辑
})

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