useScroll

useScroll 用于创建与滚动链接的动画，例如进度指示器和视差效果。

const { scrollYProgress } = useScroll()

return <motion.div style={{ scaleX: scrollYProgress }} />

用法

从 Motion 导入 useScroll

import { useScroll } from "motion/react"

useScroll 返回四个motion values（Motion 值）:

• scrollX/Y：绝对滚动位置，以像素为单位。

• scrollXProgress/YProgress：定义偏移量之间的滚动位置，值为 0 到 1 之间。

页面滚动

默认情况下，useScroll 跟踪页面滚动。

const { scrollY } = useScroll()

useMotionValueEvent(scrollY, "change", (latest) => {
  console.log("Page scroll: ", latest)
})

例如，我们可以通过将 scrollYProgress 直接传递给进度条的 scaleX 样式来显示页面滚动指示器。

const { scrollYProgress } = useScroll()

return <motion.div style={{ scaleX: scrollYProgress }} />

由于 useScroll 返回 motion values（Motion 值），我们可以将此滚动信息与其他 motion value（Motion 值）钩子（如 useTransform 和 useSpring）组合使用

const { scrollYProgress } = useScroll()
const scaleX = useSpring(scrollYProgress)

return <motion.div style={{ scaleX }} />

由于 scrollY 是一个 MotionValue，因此您可以使用一个巧妙的技巧来判断用户的滚动方向何时改变

const { scrollY } = useScroll()
const [scrollDirection, setScrollDirection] = useState("down")

useMotionValueEvent(scrollY, "change", (current) => {
  const diff = current - scrollY.getPrevious()
  setScrollDirection(diff > 0 ? "down" : "up")
})

非常适合触发粘性页眉动画！

~ Sam Selikoff,Motion for React Recipes（React 食谱的 Motion）

元素滚动

要跟踪可滚动元素的滚动位置，我们可以将元素的 ref 传递给 useScroll 的 container 选项

const carouselRef = useRef(null)
const { scrollX } = useScroll({
  container: carouselRef
})

return (
  <div ref={carouselRef} style={{ overflow: "scroll" }}>
    {children}
  </div>
)

元素位置

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

const ref = useRef(null)
const { scrollYProgress } = useScroll({
  target: ref,
  offset: ["start end", "end end"]
})

return <div ref={ref}>

在此示例中，每个项目都有其自己的进度指示器。

滚动偏移量

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

API

useScroll 接受以下选项。

container（容器）

默认值：浏览器窗口

要跟踪其滚动位置的可滚动容器。默认情况下，这是窗口视口。但它可以是任何可滚动元素。

target（目标）

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

axis（轴）

默认值："y"

应用 offset 的滚动轴。

offset（偏移量）

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

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

例如，交点 "start end" 表示 目标的开始 在跟踪轴上与 容器的结束 相遇。

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

接受的交点

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

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

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

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

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

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

示例

React Three Fiber

滚动速度