intersection观察器

对于网页而言，图片与视频是视觉吸引的关键要素，然而，仅仅依靠手动控制的静态图像和视频可能会变得单调。本文打破了常规思维，探讨了如何将视频与页面滚动完美集成。

react-intersection-observer

React 交互观察者 API 的实现，用于在元素进入或离开视口时通知您。包含钩子、呈现道具和普通子代实现。

特点

go 复制代码

钩子或组件 API - 使用 `useInView` 比以往任何时候都更容易监控元素
优化性能 - 尽可能重复使用交叉路口观测器实例
与本地 API 匹配 - 直观易用
用 TypeScript 编写--可与您现有的 TypeScriptproject 完美融合
测试就绪--模拟 Intersection Observer，便于使用 Jest 或 Vitest 进行测试
可树状摇动 - 只包括使用的部分
小捆绑 - `useInView` 约 ~1.15kB ，`<InView>` 约 ~1.6kB

安装软件包：

sql 复制代码

npm install react-intersection-observer --save

使用方法

useInView hook

scss 复制代码

// Use object destructuring, so you don't need to remember the exact order
const { ref, inView, entry } = useInView(options);

// Or array destructuring, making it easy to customize the field names
const [ref, inView, entry] = useInView(options);

使用 useInView 钩子可以轻松监控组件的 inView 状态。调用带有所需（可选）选项的 useInView 钩子。它将返回一个数组，其中包含 ref、inView 状态和当前的entry。将 ref 指定给要监控的 DOM 元素，钩子就会报告状态。

javascript 复制代码

import React from "react";
import { useInView } from "react-intersection-observer";

const Component = () => {
const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
});

return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
)};

Render props

要使用 <InView> 组件，需要向其传递一个函数。无论状态如何变化，该函数都将被调用，并显示 inView 的新值。除了inView道具外，子代还会收到一个 ref，该值应设置在包含它的 DOM 元素上。这是交叉点观察者将监控的元素。

如果需要，您还可以访问 entry 上的IntersectionObserverEntry，从而获得有关当前交叉口状态的所有详细信息。

javascript 复制代码

import { InView } from "react-intersection-observer";

const Component = () => (
  <InView>
    {({ inView, ref, entry }) => (
      <div ref={ref}>
        <h2>{`Header inside viewport ${inView}.`}</h2>
      </div>
    )}
  </InView>
);

export default Component；

Plain children

您可以向 <InView /> 传递任何元素，它将处理创建包装 DOM 元素。为 onChange 方法添加处理程序，并在自己的组件中控制状态。您添加到 <InView> 的任何额外道具都将传递给 HTML 元素，从而允许您设置 className、style 等。

javascript 复制代码

import { InView } from "react-intersection-observer";

const Component = () => (
  <InView as="div" onChange={(inView, entry) => console.log("Inview:", inView)}>
    <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
  </InView>
);

export default Component;

Name	Type	Default	Description
root	Element	document	Intersection Observer 接口的只读根属性标识元素或文档，其边界被视为作为观察点目标的元素的视口的边界框。如果根为 null ，则使用实际文档视口的边界。
rootMargin	string	0px	根部周围的边缘。可以具有类似于 CSS margin 属性的值，例如 `"10px 20px 30px 40px"` （top， right， bottom， left）。还支持百分比，以检查元素是否与视口中心相交 `"-50% 0% -50% 0%"` 。
threshold	number or number[]	0	和 `1` 之间的 `0` 数字表示触发前应可见的百分比。也可以是数字数组，以创建多个触发点。
onChange	(inView, entry) => void	undefined	每当视图状态更改时，请调用此函数。它将接收 `inView` 布尔值，以及当前的 `IntersectionObserverEntry` .
trackVisibility	boolean	false	一个布尔值，指示此交叉点观察器是否将跟踪目标上的可见性更改。
delay	number	undefined	一个数字，指示来自此观察者的给定目标的通知之间的最小延迟（以毫秒为单位）。如果 `trackVisibility` 为 `true` ，则必须至少 `100` 将其设置为。
skip	boolean	false	跳过创建 IntersectionObserver。您可以根据需要使用它来启用和禁用观察器。如果 `skip` 设置为 while `inView` ，则仍将保留当前状态。
triggerOnce	boolean	false	仅触发观察者一次。
initialInView	boolean	false	设置布尔值的 `inView` 初始值。如果您希望元素一开始就位于视口中，并且希望在元素离开时触发某些内容，则可以使用此选项。
fallbackInView	boolean	undefined	如果 `IntersectionObserver` API 在客户端中不可用，则默认行为是引发错误。您可以设置特定的回退行为，该 `inView` 值将设置为此值，而不是失败。要设置全局默认值，可以使用 `defaultFallbackInView()`

实际应用

javascript 复制代码

import { useInView } from 'react-intersection-observer';
const { ref, inView } = useInView({
    threshold: 0, // 当元素完全进入视口时触发
});
<div ref={ref} className={`fade-out-component ${inView ? 'fade-out' : ''}`}>
    <h1>XXXX</h1>
</div>