useWindowScroll

Tags:

A React Hook that helps to track and manipulate window scroll state.

Demo

Source
(X, Y):
(0, 0)
(maxX, maxY):
(0, 0)

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const scroll = useWindowScroll(options)

Options

export interface UseWindowScrollOptions {
  /**
   * The scroll behavior, set to 'smooth' to enable smooth scrolling.
   *
   * @defaultValue 'auto'
   */
  behavior?: ScrollBehavior
}

Returns

export interface UseWindowScrollReturns extends Position {
  /**
   * Scrolls the window to the specified position.
   *
   * @param newPos The new position to scroll to.
   */
  scrollTo(newPos: Partial<Position>): void
  /**
   * Scrolls the window to the top.
   */
  scrollToTop(): void
  /**
   * Scrolls the window to the bottom.
   */
  scrollToBottom(): void
  /**
   * Scrolls the window to the left.
   */
  scrollToLeft(): void
  /**
   * Scrolls the window to the right.
   */
  scrollToRight(): void
}