useScroll

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

<script setup>
  const { scrollYProgress } = useScroll()
</script>

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

用法

从 Motion 导入 useScroll

import { useScroll } from "motion-v"

useScroll 返回四个motion 值:

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

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

页面滚动

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

const { scrollY } = useScroll()

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

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

<script setup>
  const { scrollYProgress } = useScroll()
</script>

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

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

<script setup>
const { scrollYProgress } = useScroll()
const scaleX = useSpring(scrollYProgress)
</script>

<template>
  <Motion :style="{ scaleX }" />
</template>

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

<script setup>
  const { scrollY } = useScroll()
  const scrollDirection = ref('down')
  
  useMotionValueEvent(scrollY, 'change', (current) => {
    const diff = current - scrollY.getPrevious()
    scrollDirection.value = diff > 0 ? 'down' : 'up'
  })
</script>

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

~ Sam Selikoff,Motion React 食谱

元素滚动

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

<script setup>
  const carouselRef = useRef()
  const { scrollX } = useScroll({
    container: carouselRef
  })
</script>

<template>
  <div ref="carouselRef" style="overflow: scroll">
    <slot />
  </div>
</template>

元素位置

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

<script setup>
  const ref = useRef()
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end end']
  })
</script>

<template>
  <div ref="ref"/>
</template>

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

滚动偏移量

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

API

useScroll 接受以下选项。

容器

默认值：浏览器窗口

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

目标

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

轴

默认值："y"

应用 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" 单位。