useScroll

useScroll is used to create scroll-linked animations, like progress indicators and parallax effects.

const { scrollYProgress } = useScroll()

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

Usage

import { useScroll } from 'motion-v'

useScroll returns four motion values:

scrollX/Y: The absolute scroll position, in pixels.
scrollXProgress/YProgress: The scroll position between the defined offsets, as a value between 0 and 1.

By default, useScroll tracks the page scroll.

const { scrollY } = useScroll()

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

For example, we could show a page scroll indicator by passing scrollYProgress straight to the scaleX style of a progress bar.

As useScroll returns motion values, we can compose this scroll info with other motion value hooks like useTransform and useSpring:

On This Page