Motion Vue

useScroll

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

const { scrollYProgress } = useScroll()

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

使用

import { useScroll } from 'motion-v'

useScroll 返回四个运动值：

  • scrollX/Y：绝对滚动位置，以像素为单位。
  • scrollXProgress/YProgress：在定义的偏移量之间的滚动位置，作为一个介于 0 和 1 之间的值。

页面滚动

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

const { scrollY } = useScroll()

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

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

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

资源

useMotionTemplate
useSpring