简体中文

useElementVisibility

Tags:

Element

一个 React Hook，用于检查元素在视口中是否可见。

演示

向下滚动虚线框以查看元素的可见性状态。

源码

Element visibility:

false

Scroll down to see visibility

I'm the target element

The visibility will be false

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

const visibility = useElementVisibility(elementTarget, options)

元素目标 ElementTarget

ElementTarget 是一个联合类型，代表可以被定位的各种元素。

更多详情，请参见 ElementTarget 或 ElementTarget 类型。

选项 Options

export type UseElementVisibilityOptions = Pick<UseIntersectionObserverOptions, 'threshold'> & {
  /**
   * 要观察的目标元素
   */
  scrollTarget?: ElementTarget
  /**
   * 当目标元素的可见性改变时会调用的回调函数
   */
  onChange?: (visibility: boolean) => void
}

UseIntersectionObserverOptions 是 useIntersectionObserver 的选项，更多详情请参见 useIntersectionObserver#options。

返回值

一个 boolean 值，表示目标元素在视口中是否可见。

ON THIS PAGE

#useElementVisibility

#演示

#用法

#源码

#API

#元素目标 ElementTarget

#选项 Options

#返回值

useElementVisibility

演示

用法

源码

API

元素目标 ElementTarget

选项 Options

返回值