use-window-scroll

Tracks window scroll position

Import

Usage

use-window-scroll returns current scroll position and a function to scroll smoothly to given position:

Scroll position x: 0, y: 0

import { useWindowScroll } from '@mantine/hooks';
import { Button, Text, Group } from '@mantine/core';

function Demo() {
  const [scroll, scrollTo] = useWindowScroll();

  return (
    <Group justify="center">
      <Text>
        Scroll position x: {scroll.x}, y: {scroll.y}
      </Text>
      <Button onClick={() => scrollTo({ y: 0 })}>Scroll to top</Button>
    </Group>
  );
}

Definition

function useWindowScroll(): readonly [
  { x: number; y: number },
  (position: { x?: number; y?: number }) => void,
];