Intersection Observer.md

Intersection Observer

IntersectionObserver 浏览器 API 将使我们能够轻松检测元素何时完全或部分出现在屏幕上。

当您需要禁用 UI 直到屏幕上显示某些内容时，Intersection Observer 非常方便。

例如，如果您使用过简书，您可能会发现当头部 header 滚动到一定区域时，会切换为另一个 header，以下是使用 Intersection Observer 实现的示例：

const block = document.querySelector('.block')
const header = document.querySelector('.header')
const otherHeader = document.querySelector('.other-header')

const observer = new IntersectionObserver((entries) => {
  if (entries[0].intersectionRatio > 0) {
    header.classList.remove('switch-header')
    otherHeader.classList.remove('switch-other-header')
  } else {
    header.classList.add('switch-header')
    otherHeader.classList.add('switch-other-header')
  }
})

observer.observe(block)

演示地址

IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数：

• callback 是可见性变化时的回调函数
• option 是配置对象（可选）

构造函数的返回值是一个观察器实例。

let io = new IntersectionObserver(callback, option)

实例的 observe 方法可以指定观察哪个 DOM 节点，需要观察多个节点，就要调用多次该方法：

io.observe(el)

实例的 unobserve 方法可以停止观察：

io.unobserve()

实例的 disconnect 方法可以关闭观察：

io.disconnect()

以上是它实例的几个方法。

本来继续往下写的，但已经有很多关于它的教程了，这里推荐阮一峰老师的 IntersectionObserver API 使用教程。

以下是一些不错示例：

• 示例一
• 示例二
• 返回顶部

还有很多示例，包括懒加载、无限滚动、虚拟列表等，您可以进一步阅读下面的文章。

更多资料

关于 IntersectionObserver API 的文章很多，以下是一些不错的文章：

• Intersection Observer comes to Firefox
• Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
• Implementing Infinite Scroll And Image Lazy Loading In React
• Using IntersectionObserver to Check if Page Scrolled Past Certain Point
• Sticky Table of Contents with Scrolling Active States
• How to Detect When a Sticky Element Gets Pinned
• A Few Functional Uses for Intersection Observer to Know When an Element is in View
• Lazy Loading Images with Vue.js Directives and Intersection Observer
• Styling Based on Scroll Position
• Parsing Markdown into an Automated Table of Contents
• Lozad.js: Performant Lazy Loading of Images
• Table of Contents with IntersectionObserver
• IntersectionObserver 实现虚拟列表初探