useWindowScroll

Category

Elements

Export Size

1.09 kB

Last Changed

5 days ago

Reactive window scroll

Demo

Usage

import { useWindowScroll } from '@reause/core'

const { x, y, isScrolling, arrivedState, directions, setX, setY } = useWindowScroll()

// read the current scroll position: x, y
setX(100) // scroll X to 100
setY(100) // scroll Y to 100

Type Declarations

Toggle

export interface UseWindowScrollOptions {
    window?: Window;
    throttle?: number;
    idle?: number;
    offset?: {
        left?: number;
        right?: number;
        top?: number;
        bottom?: number;
    };
    observe?: boolean | {
        mutation?: boolean;
    };
    onScroll?: (e: Event) => void;
    onStop?: (e: Event) => void;
    eventListenerOptions?: boolean | AddEventListenerOptions;
    behavior?: ScrollBehavior;
    onError?: (error: unknown) => void;
}

export interface UseWindowScrollReturn {
    x: number;
    y: number;
    isScrolling: boolean;
    arrivedState: {
        left: boolean;
        right: boolean;
        top: boolean;
        bottom: boolean;
    };
    directions: {
        left: boolean;
        right: boolean;
        top: boolean;
        bottom: boolean;
    };
    measure: () => void;
    setX: (x: number) => void;
    setY: (y: number) => void;
}

export function useWindowScroll(options?: UseWindowScrollOptions): UseWindowScrollReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

584fc - fix(core): resolve useWindowScroll audit findings (#696)

30916 - fix(test): stabilize flaky timing-sensitive browser tests