scroll

Motion 仅 5.1kb 的 scroll() 函数可创建与滚动链接的动画。

与滚动链接的动画是指值直接绑定到滚动进度的动画。当滚动改变时，值也会按相对量改变。

这与滚动触发的动画形成对比，滚动触发的动画是指当元素进入/离开视口时动画开始/停止。在 Motion 中，这些可以使用 inView 构建。

scroll 是唯一利用 Motion 混合引擎的 API，它尽可能使用 ScrollTimelineAPI以获得最佳性能。这消除了滚动测量并实现了硬件加速动画。

用法

从 Motion 导入 scroll

import { scroll } from "motion"

回调

scroll() 可以接受一个回调函数。当滚动改变时，将调用此回调函数，并带有最新的 progress 值，该值介于 0 和 1 之间。

scroll(progress => console.log(progress))

动画

scroll() 也可以接受使用 animate() 创建的动画函数.

const animation = animate(
  "div",
  { transform: ["none", "rotate(90deg)"] },
  { ease: "linear" }
)  

scroll(animation)

支持 ScrollTimeline API 的浏览器将使用它来运行支持的硬件加速动画。

滚动轴

默认情况下，跟踪垂直滚动。通过提供 axis: "x" 选项，可以改为跟踪水平滚动。

scroll(callback, { axis: "x" })

跟踪元素滚动

scroll() 默认跟踪 window 滚动。它也可以通过 container 选项传入 Element，从而跟踪 Element 的滚动。

scroll(callback, { container: document.getElementById("scroller") })

跟踪元素位置

我们可以通过将其 ref 传递给 target 选项来跟踪元素在容器中移动的进度。

scroll(animation, { target: document.getElementById("item") })

滚动偏移

使用 offset 选项，我们可以定义要跟踪 target 的哪些部分在 container 内，例如跟踪从底部进入、从顶部离开或在整个视口中移动的元素。

固定

为了使用浏览器获得最佳性能，应该使用 position: sticky 执行固定。

这非常有效，例如，通过使用更大的容器元素来定义滚动距离并将其传递给 target 选项，以创建基于部分的全屏效果

滚动信息

通过传递带有第二个 info 参数的回调，可以获取有关滚动的详细信息。

scroll((progress, info) => {
  console.log(info.x.current)
})

info 对象包含

• time: 记录滚动位置的时间。

• x: 关于 x 滚动轴的信息。

• y: 关于 y 滚动轴的信息。

每个单独的轴都是一个包含以下数据的对象

• current: 当前滚动位置。

• offset: 解析为像素的滚动偏移量。

• progress: 在解析的偏移量内，滚动的进度值，介于 0-1 之间。

• scrollLength: 此轴上的总可滚动长度。如果 target 是默认的可滚动区域，则这是容器滚动长度减去容器长度。

• velocity: 此轴上的滚动速度。

取消动画

scroll() 返回一个清理函数。调用此函数可取消滚动动画。

const cancel = scroll(callback)

cancel()

选项

container

默认值: window

我们正在跟踪其滚动进度的容器滚动元素或窗口。

scroll(
  (progress) => console.log(progress),
  { container: document.getElementById("carousel") }  
)

axis

默认值: "y"

要跟踪的滚动轴。默认为 "y"。

scroll(
  (progress) => console.log(progress),
  { axis: "x" }  
)

target

默认情况下，这是 container 的可滚动区域。它也可以设置为另一个元素，以跟踪其在视口中的进度。

scroll(
  animation
  { target: document.getElementById("item") }  
)

offset

默认值: ["start start", "end end"]

offset 描述了交点，即 target 和 container 相遇的点。

例如，交点 "start end" 表示当 目标 (target) 的起始位置在跟踪轴上与容器 (container) 的结束位置相遇。

因此，如果目标是元素，容器是窗口，并且我们正在跟踪垂直轴，那么 "start end" 就是 元素的顶部 与 视口的底部 相遇的位置。

接受的交点

目标和容器点都可以定义为

• 数字: 一个值，其中 0 表示轴的开始，1 表示轴的结束。因此，要将目标的顶部定义为容器的中间，您可以定义 "0 0.5"。允许超出此范围的值。

• 名称: "start"、"center" 和 "end" 可以用作 0、0.5 和 1 的清晰快捷方式。

• 像素: 像素值，如 "100px"、"-50px" 将被定义为距目标/容器起点的像素数。

• 百分比: 与原始数字相同，但表示为 "0%" 到 "100%"。

• 视口: 接受 "vh" 和 "vw" 单位。