Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 30x 30x 30x 30x 30x | import { createScrollMotionValues, createScrollUpdater, ScrollMotionValues, } from "./utils" import { addDomEvent } from "../../events/use-dom-event" import { useIsomorphicLayoutEffect } from "../../utils/use-isomorphic-effect" let viewportScrollValues: ScrollMotionValues function getViewportScrollOffsets() { return { xOffset: window.pageXOffset, yOffset: window.pageYOffset, xMaxOffset: document.body.clientWidth - window.innerWidth, yMaxOffset: document.body.clientHeight - window.innerHeight, } } let hasListeners = false function addEventListeners() { hasListeners = true if (typeof window === "undefined") return const updateScrollValues = createScrollUpdater( viewportScrollValues, getViewportScrollOffsets ) addDomEvent(window, "scroll", updateScrollValues, { passive: true }) addDomEvent(window, "resize", updateScrollValues) } /** * Returns MotionValues that update when the viewport scrolls: * * - `scrollX` — Horizontal scroll distance in pixels. * - `scrollY` — Vertical scroll distance in pixels. * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`. * - `scrollYProgress` — Vertical scroll progress between `0` and `1`. * * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress` * values as this breaks the browser's capability to accurately measure the page length. * * ```jsx * export const MyComponent = () => { * const { scrollYProgress } = useViewportScroll() * return <motion.div style={{ scaleX: scrollYProgress }} /> * } * ``` * * @public */ export function useViewportScroll(): ScrollMotionValues { /** * Lazy-initialise the viewport scroll values */ if (!viewportScrollValues) { viewportScrollValues = createScrollMotionValues() } useIsomorphicLayoutEffect(() => { !hasListeners && addEventListeners() }, []) return viewportScrollValues } |