检查可见

在前端开发中，“检查可见”指的是判断元素是否在用户的视野中可见。这在很多场景下是非常有意义的，比如：

• 判断用户是否已经滚动到底部
• 判断图片是否已经被加载并显示
• 延迟加载非常庞大的元素，以提高页面性能

视野范围

在了解“检查可见”之前，我们需要先了解几个概念：

• window: 表示浏览器的窗口，通过它可以获得视窗的宽度和高度。
• scrollY: 表示窗口已经滚动的垂直距离。
• scrollHeight: 表示整个页面的垂直高度。
• clientHeight: 表示窗口的可视区域高度。

有了这些概念，我们就可以计算出当前用户视窗中的的纵向范围：

const top = window.scrollY
const bottom = top + window.clientHeight

元素位置

接下来要解决的问题是，如何判断元素是否在用户视窗中可见。先了解一下几个概念：

• offsetTop: 元素相对于其父节点的垂直位置。
• offsetHeight: 元素的垂直高度。

有了这些概念，我们就可以计算出一个元素相对于浏览器窗口的垂直坐标：

const elementTop = element.offsetTop
const elementBottom = elementTop + element.offsetHeight

判断元素是否可见

现在我们拥有了视野范围和元素在浏览器窗口中的位置，我们只需要判断这两个范围是否重叠，即可得出元素是否可见：

const isVisible = elementBottom > top && elementTop < bottom

实现方式

通常情况下，我们需要监听用户的滚动事件，当滚动时检查所有需要检查可见的元素。这里是一个实现示例：

function checkVisible() {
  const elements = document.querySelectorAll('.visible-check')
  const top = window.scrollY
  const bottom = top + window.innerHeight
  elements.forEach((element) => {
    const elementTop = element.offsetTop
    const elementBottom = elementTop + element.offsetHeight
    const isVisible = elementBottom > top && elementTop < bottom
    if (isVisible) {
      element.classList.add('visible')
    } else {
      element.classList.remove('visible')
    }
  })
}

window.addEventListener('scroll', checkVisible)

这个示例代码监听了 scroll 事件，并且将需要检查可见的元素的类名设置为 visible-check，当一个元素在用户视野范围内时，它会添加一个 visible 类名，你可以在 CSS 中设置这个类名的效果。

总结

如果你需要在开发中判断元素是否在用户的视野中可见，可以使用上述的方法进行检查。需要注意的是，这个方法只能检查元素是否在垂直范围内可见，如果需要检查元素在水平范围内可见，需要根据不同的情况进行计算。