跳至主要内容

useElementVisibility

追踪視窗内元素可見性的 React Hook。这是 useIntersectionObserver 的一个封装器

Usage​

即時編輯器

function Demo() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, stop] = useElementVisibility(ref);

  return (
    <div>
      <p>右下角的信息</p>
      <div
        ref={ref}
        style={{
          borderWidth: 2,
          borderStyle: "solid",
          padding: "1rem",
        }}
      >
        目標元素（向下滾動）
      </div>
      <button
        onClick={() => {
          stop();
        }}
      >
        停止
      </button>
      <div
        style={{
          borderWidth: 2,
          borderStyle: "solid",
          padding: "1rem",
          position: "fixed",
          bottom: 0,
          right: 0,
          zIndex: 100,
        }}
      >
        元素 {visible ? "在視窗內" : "在視窗外"}
      </div>
    </div>
  );
};
結果
Loading...

API​

useElementVisibility​

Returns​

readonly [boolean, () => void]: 包含以下元素的元組：

  • 當前元素是否可見。
  • 停止監聽函數。

Arguments​

參數名描述類型預設值
targetdom对象BasicTarget<HTMLElement | SVGElement> (必填)-
options传递给 intersectionObserver 的选项IntersectionObserverInit | undefined-

BasicTarget​

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue​

type TargetValue<T> = T | undefined | null;

TargetType​

type TargetType = HTMLElement | Element | Window | Document | EventTarget;