useInView
useInView 是一个微小的 (0.6kb) Hook，用于检测提供的元素何时在视口内。 它可以与任何 React 元素一起使用。
const ref = useRef(null) const isInView = useInView(ref) return <div ref={ref} />
用法
从 Motion 导入 useInView
import { useInView } from "motion/react"
useInView 可以跟踪任何 HTML 元素的可见性。 将一个 ref 对象传递给 useInView 和 HTML 元素。
function Component() { const ref = useRef(null) const isInView = useInView(ref) return <div ref={ref} /> }
当元素在视口外时，useInView 将返回 false。 当它移动到视口内时，它将重新渲染组件并返回 true。
效果
useInView 是原生 React 状态，因此在 isInView 更改时触发函数只需将其传递给 useEffect。
useEffect(() => { console.log("Element is in view: ", isInView) }, [isInView])
选项
useInView 可以接受选项来定义如何在视口内跟踪元素。
const isInView = useInView(ref, { once: true })
root
默认情况下，useInView 将跟踪元素进入/离开窗口视口时的可见性。 将 root 设置为可滚动父元素的 ref，它将使用该元素作为视口。
function Carousel() { const container = useRef(null) const ref = useRef(null) const isInView = useInView({ root: container }) return ( <div ref={container} style={{ overflow: "scroll" }}> <div ref={ref} /> </div> ) }
margin
默认值："0px"
添加到视口的 margin 以更改检测区域。 使用多个值来调整上/右/下/左，例如 "0px -20px 0px 100px"。
const isInView = useInView({ margin: "0px 100px -50px 0px" })
]注意： 出于浏览器安全原因，margin在跨域 iframe 中不会生效除非显式定义了 root。
once
默认值：false
如果为 true，则当元素进入视图后，useInView 将停止观察该元素并始终返回 true。
const isInView = useInView(ref, { once: true })
initial
默认值：false
设置一个初始值，在元素被测量之前返回。
const isInView = useInView(ref, { initial: true })
amount
默认值： "some"
应进入视口以被视为“进入”的元素量。 可以是 "some"、"all" 或介于 0 和 1 之间的数字。
示例
useInView 是一个微小的 (0.6kb) Hook，用于检测提供的元素何时在视口内。 它可以与任何 React 元素一起使用。
const ref = useRef(null) const isInView = useInView(ref) return <div ref={ref} />
用法
从 Motion 导入 useInView
import { useInView } from "motion/react"
useInView 可以跟踪任何 HTML 元素的可见性。 将一个 ref 对象传递给 useInView 和 HTML 元素。
function Component() { const ref = useRef(null) const isInView = useInView(ref) return <div ref={ref} /> }
当元素在视口外时，useInView 将返回 false。 当它移动到视口内时，它将重新渲染组件并返回 true。
效果
useInView 是原生 React 状态，因此在 isInView 更改时触发函数只需将其传递给 useEffect。
useEffect(() => { console.log("Element is in view: ", isInView) }, [isInView])
选项
useInView 可以接受选项来定义如何在视口内跟踪元素。
const isInView = useInView(ref, { once: true })
root
默认情况下，useInView 将跟踪元素进入/离开窗口视口时的可见性。 将 root 设置为可滚动父元素的 ref，它将使用该元素作为视口。
function Carousel() { const container = useRef(null) const ref = useRef(null) const isInView = useInView({ root: container }) return ( <div ref={container} style={{ overflow: "scroll" }}> <div ref={ref} /> </div> ) }
margin
默认值："0px"
添加到视口的 margin 以更改检测区域。 使用多个值来调整上/右/下/左，例如 "0px -20px 0px 100px"。
const isInView = useInView({ margin: "0px 100px -50px 0px" })
]注意： 出于浏览器安全原因，margin在跨域 iframe 中不会生效除非显式定义了 root。
once
默认值：false
如果为 true，则当元素进入视图后，useInView 将停止观察该元素并始终返回 true。
const isInView = useInView(ref, { once: true })
initial
默认值：false
设置一个初始值，在元素被测量之前返回。
const isInView = useInView(ref, { initial: true })
amount
默认值： "some"
应进入视口以被视为“进入”的元素量。 可以是 "some"、"all" 或介于 0 和 1 之间的数字。
示例
useInView 是一个微小的 (0.6kb) Hook，用于检测提供的元素何时在视口内。 它可以与任何 React 元素一起使用。
const ref = useRef(null) const isInView = useInView(ref) return <div ref={ref} />
用法
从 Motion 导入 useInView
import { useInView } from "motion/react"
useInView 可以跟踪任何 HTML 元素的可见性。 将一个 ref 对象传递给 useInView 和 HTML 元素。
function Component() { const ref = useRef(null) const isInView = useInView(ref) return <div ref={ref} /> }
当元素在视口外时，useInView 将返回 false。 当它移动到视口内时，它将重新渲染组件并返回 true。
效果
useInView 是原生 React 状态，因此在 isInView 更改时触发函数只需将其传递给 useEffect。
useEffect(() => { console.log("Element is in view: ", isInView) }, [isInView])
选项
useInView 可以接受选项来定义如何在视口内跟踪元素。
const isInView = useInView(ref, { once: true })
root
默认情况下，useInView 将跟踪元素进入/离开窗口视口时的可见性。 将 root 设置为可滚动父元素的 ref，它将使用该元素作为视口。
function Carousel() { const container = useRef(null) const ref = useRef(null) const isInView = useInView({ root: container }) return ( <div ref={container} style={{ overflow: "scroll" }}> <div ref={ref} /> </div> ) }
margin
默认值："0px"
添加到视口的 margin 以更改检测区域。 使用多个值来调整上/右/下/左，例如 "0px -20px 0px 100px"。
const isInView = useInView({ margin: "0px 100px -50px 0px" })
]注意： 出于浏览器安全原因，margin在跨域 iframe 中不会生效除非显式定义了 root。
once
默认值：false
如果为 true，则当元素进入视图后，useInView 将停止观察该元素并始终返回 true。
const isInView = useInView(ref, { once: true })
initial
默认值：false
设置一个初始值，在元素被测量之前返回。
const isInView = useInView(ref, { initial: true })
amount
默认值： "some"
应进入视口以被视为“进入”的元素量。 可以是 "some"、"all" 或介于 0 和 1 之间的数字。
