检查元素是否在视口中.md

检查元素是否在视口中

可以使用 Element.getBoundingClientRect() 方法获取元素的大小及其相对于视口的位置。

当元素完全在视口中时，它的 top 和 left 属性都大于等于 0，bottom 和 right 属性都小于等于可视区域的高度和宽度。

如果 ele 在视口中可见，则以下函数返回 true：

const isInViewport = function (ele) {
  const rect = ele.getBoundingClientRect()
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
}

我们通过 getBoundingClientRect() 获取元素的位置信息，然后使用 window.innerHeight 和 window.innerWidth 来获取可视区域的高度和宽度。

在这个例子中，我们是判断了 top、left、bottom 和 right 都在视口内，这样可以保证元素完全在可视区域内。

需要注意的是，这个函数并不能准确地检查元素是否被遮挡，只能检查元素是否在可视区域内。

什么情况下会出现元素被遮挡？

当一个元素完全或部分被其他元素遮挡时，我们就说这个元素被遮挡了。比如说当一个浮动层元素出现在另一个元素上面，这时你想判断这个底下的元素是否被遮挡了，这就是被遮挡的情况。

另一个例子是检查一个图片是否完全被父元素的 overflow（溢出）隐藏掉了。如果这个图片是在父元素的可视区域内，但是被父元素的 overflow 属性隐藏了，这时候我们就说这个元素被遮挡了。

如果你需要检查元素是否被遮挡你可以使用 IntersectionObserver API。