面试判断元素是否在可视区域中IntersectionObserver详解

前言

我们面试中常见的一个问题，如何判断元素是否在可视区域中（即视口区域）？第一时间想到的肯定就是通过，offsetHeight、clientHeight、scrollHeight、scrrollTop、window.innerHeight等等东西来计算。而IntersectionObserver更好的帮我们解决了这个问题。

应用场景

去实现懒加载、无限滚动等等操作。

例：使用到的场景就是大量数据展示问题，一次性渲染大量数据，肯定会出现渲染性能问题。如：一个select选择框，有大量数据，而视口展示的内容只有其中一小小部分。我们只需要先渲染视口展示的内容，当用户滚动的时候，再渲染剩下的数据。这也是为什么在面试中要问这个问题。

使用

先放链接IntersectionObserver - Web API 接口参考 | MDN (mozilla.org)

IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

现在就用一个例子演示：

 <ul>
      <li ref="li" v-for="(item, index) in lis" :key="index">{{ item }}</li>
    </ul>
const lis = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

我这里创建了一个ul 里面有很多小（10个）li。然后我们想实现懒加载就需要用到IntersectionObserver这个API

第一步：先要获取需要监听元素的DOM，那我们这里需要获取滚动条数据的最后一个元素，也就是：li.value[li.value.length - 1]（即li的最后一个DOM元素）。

   const li = ref(null)

然后我们创建IntersectionObserver实例对象。 语法

var observer = new IntersectionObserver(callback[, options]); 这里有几个参数解释：

callback

当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：

entries

一个IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。

observer

被调用的IntersectionObserver实例。

  const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 为 0，则目标在可视区域之外，
  //直接return
  if (entries[0].intersectionRatio <= 0) return
  //停止在前一个DOM的监听。
  intersectionObserver.disconnect(li.value[li.value.length - 1])
  //如过在可视区域之内，则我们添加数据。
  lis.push(...[1, 2, 3, 4, 5, 6])
  //更新监听的DOM
  intersectionObserver.observe(li.value[li.value.length - 1])
  console.log('Loaded new items')
})
onMounted(() => {
  //这里对li的最后一个组件进行监听。
  intersectionObserver.observe(li.value[li.value.length - 1])
})

这样就能够实现一个懒加载的效果。

由此可见IntersectionObserver是多么的方便，而且还节省性能。

结语

IntersectionObserver现在对绝大多数浏览器都兼容，对于极个别可能不支持，在我们日常开发中也可以提供很大帮助。

虽然现在的组件库多种多样，且许多地方都已经自带了懒加载的操作方法，无需了解其原理。但如果想要我们的技术更上一个台阶需要更加去了解。

参考资料 IntersectionObserver - Web API 接口参考 | MDN (mozilla.org)

以上就是面试判断元素是否在可视区域中IntersectionObserver详解的详细内容，更多关于IntersectionObserver可视区域的资料请关注脚本之家其它相关文章！

最新评论