文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

开始使用

示例

动画

手势

Motion 值

工具

集成

指南

JS

React

Vue

开始使用

示例

动画

手势

Motion 值

工具

集成

指南

JavaScript

inView

inView

inView 检测元素何时进入和离开视口。

inView("#carousel li", (element) => {
  animate(element, { opacity: 1 })
})

检测元素何时在视口中可以帮助创建如下效果：

  • 当元素滚动进入和退出视口时，为其添加动画效果。

  • 当动画不再可见时，停用动画。

  • 懒加载内容。

  • 自动启动/停止视频。

inView 函数构建于浏览器原生Intersection Observer API之上，以实现最佳性能（所有计算都在主 JavaScript 线程之外进行）和极小的文件大小（仅 0.5kb）。

用法

从 "motion" 导入

import { inView } from "motion"

inView 可以接受选择器、Element 或 Element 数组。

// Selector
inView("section", callback)

// Element
const box = document.getElementById("box")
inView(box, callback)

默认情况下，提供的回调函数只会在元素首次进入视口时触发一次。

inView(element, () => {
  console.log("Element has entered the viewport")
})

此回调函数会提供匹配的元素和一个IntersectionObserverEntry对象，其中包含有关相交的信息。

inView("a", (element, info) => {
  console.log("The link ", element, " has entered the viewport")
})

离开视口

从此回调函数返回的函数将在元素离开视口时触发。

inView(element,
  (element, enterInfo) => {
    const animation = animate(element, { opacity: 1 })
    
    // This will fire when the element leaves the viewport
    return (leaveInfo) => animation.stop()
  }
)

此外，当元素进入/离开视口时，手势也将继续触发。

更改视口

默认情况下，inView 检测提供的元素何时进入/离开默认视口：浏览器窗口。

但它也可以检测元素何时进入/离开可滚动父元素的视口，方法是将该元素传递给 root 选项。

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

停止检测

inView 返回一个函数，当调用该函数时，将停止视口检测。

const stop = inView(element, callback)

stop()

选项

root

默认值： window

如果提供，inView 将使用 root 元素的视口来检测目标元素是否在视图中。否则默认为浏览器窗口。

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

margin

默认值： 0

应用于视口的一个或多个边距。这将扩展或收缩元素被认为在视口内或视口外的点。

margin 可以用像素或百分比定义。它可以接受最多四个值，顺序为上/右/下/左。

inView(element, callback, { margin: "0px 100px 0px 0px" })

正值会将视口边界扩展到根元素之外，而负值会将其拉入。

注意： 出于浏览器安全原因，margin在跨域 iframe 中不会生效，除非显式定义了 root。

amount

默认值： "some"

目标元素需要位于视口边界内的量，才被视为在视图中。

这可以定义为 "some"（元素的一部分）或 "all"（元素的全部）。

此外，它可以定义为介于 0 和 1 之间的数字比例，其中 0 为 "some"，1 为 "all"。

inView 检测元素何时进入和离开视口。

inView("#carousel li", (element) => {
  animate(element, { opacity: 1 })
})

检测元素何时在视口中可以帮助创建如下效果：

  • 当元素滚动进入和退出视口时，为其添加动画效果。

  • 当动画不再可见时，停用动画。

  • 懒加载内容。

  • 自动启动/停止视频。

inView 函数构建于浏览器原生Intersection Observer API之上，以实现最佳性能（所有计算都在主 JavaScript 线程之外进行）和极小的文件大小（仅 0.5kb）。

用法

从 "motion" 导入

import { inView } from "motion"

inView 可以接受选择器、Element 或 Element 数组。

// Selector
inView("section", callback)

// Element
const box = document.getElementById("box")
inView(box, callback)

默认情况下，提供的回调函数只会在元素首次进入视口时触发一次。

inView(element, () => {
  console.log("Element has entered the viewport")
})

此回调函数会提供匹配的元素和一个IntersectionObserverEntry对象，其中包含有关相交的信息。

inView("a", (element, info) => {
  console.log("The link ", element, " has entered the viewport")
})

离开视口

从此回调函数返回的函数将在元素离开视口时触发。

inView(element,
  (element, enterInfo) => {
    const animation = animate(element, { opacity: 1 })
    
    // This will fire when the element leaves the viewport
    return (leaveInfo) => animation.stop()
  }
)

此外，当元素进入/离开视口时，手势也将继续触发。

更改视口

默认情况下，inView 检测提供的元素何时进入/离开默认视口：浏览器窗口。

但它也可以检测元素何时进入/离开可滚动父元素的视口，方法是将该元素传递给 root 选项。

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

停止检测

inView 返回一个函数，当调用该函数时，将停止视口检测。

const stop = inView(element, callback)

stop()

选项

root

默认值： window

如果提供，inView 将使用 root 元素的视口来检测目标元素是否在视图中。否则默认为浏览器窗口。

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

margin

默认值： 0

应用于视口的一个或多个边距。这将扩展或收缩元素被认为在视口内或视口外的点。

margin 可以用像素或百分比定义。它可以接受最多四个值，顺序为上/右/下/左。

inView(element, callback, { margin: "0px 100px 0px 0px" })

正值会将视口边界扩展到根元素之外，而负值会将其拉入。

注意： 出于浏览器安全原因，margin在跨域 iframe 中不会生效，除非显式定义了 root。

amount

默认值： "some"

目标元素需要位于视口边界内的量，才被视为在视图中。

这可以定义为 "some"（元素的一部分）或 "all"（元素的全部）。

此外，它可以定义为介于 0 和 1 之间的数字比例，其中 0 为 "some"，1 为 "all"。

inView 检测元素何时进入和离开视口。

inView("#carousel li", (element) => {
  animate(element, { opacity: 1 })
})

检测元素何时在视口中可以帮助创建如下效果：

  • 当元素滚动进入和退出视口时，为其添加动画效果。

  • 当动画不再可见时，停用动画。

  • 懒加载内容。

  • 自动启动/停止视频。

inView 函数构建于浏览器原生Intersection Observer API之上，以实现最佳性能（所有计算都在主 JavaScript 线程之外进行）和极小的文件大小（仅 0.5kb）。

用法

从 "motion" 导入

import { inView } from "motion"

inView 可以接受选择器、Element 或 Element 数组。

// Selector
inView("section", callback)

// Element
const box = document.getElementById("box")
inView(box, callback)

默认情况下，提供的回调函数只会在元素首次进入视口时触发一次。

inView(element, () => {
  console.log("Element has entered the viewport")
})

此回调函数会提供匹配的元素和一个IntersectionObserverEntry对象，其中包含有关相交的信息。

inView("a", (element, info) => {
  console.log("The link ", element, " has entered the viewport")
})

离开视口

从此回调函数返回的函数将在元素离开视口时触发。

inView(element,
  (element, enterInfo) => {
    const animation = animate(element, { opacity: 1 })
    
    // This will fire when the element leaves the viewport
    return (leaveInfo) => animation.stop()
  }
)

此外，当元素进入/离开视口时，手势也将继续触发。

更改视口

默认情况下，inView 检测提供的元素何时进入/离开默认视口：浏览器窗口。

但它也可以检测元素何时进入/离开可滚动父元素的视口，方法是将该元素传递给 root 选项。

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

停止检测

inView 返回一个函数，当调用该函数时，将停止视口检测。

const stop = inView(element, callback)

stop()

选项

root

默认值： window

如果提供，inView 将使用 root 元素的视口来检测目标元素是否在视图中。否则默认为浏览器窗口。

const carousel = document.querySelector("#carousel")

inView("#carousel li", callback, { root: carousel })

margin

默认值： 0

应用于视口的一个或多个边距。这将扩展或收缩元素被认为在视口内或视口外的点。

margin 可以用像素或百分比定义。它可以接受最多四个值，顺序为上/右/下/左。

inView(element, callback, { margin: "0px 100px 0px 0px" })

正值会将视口边界扩展到根元素之外，而负值会将其拉入。

注意： 出于浏览器安全原因，margin在跨域 iframe 中不会生效，除非显式定义了 root。

amount

默认值： "some"

目标元素需要位于视口边界内的量，才被视为在视图中。

这可以定义为 "some"（元素的一部分）或 "all"（元素的全部）。

此外，它可以定义为介于 0 和 1 之间的数字比例，其中 0 为 "some"，1 为 "all"。

hover

press

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助商

社交媒体

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
网站

关于

博客

文档

示例

Motion+

赞助商

社交媒体

Discord

GitHub

X/Twitter

Bluesky