API Reference
useScrollPosition

useScrollPosition

This hook allows you to track the current document scroll position by monitoring window.scrollX and window.scrollY. When the user scrolls, the hook will automatically update the returned x and y values.

Installation

  1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

  2. Import useScrollPosition into your component.

import { useScrollPosition } from '@ridgehkr/useful'

Usage

The useWindowSize hook doesn't take any parameters. It returns an object with the current width and height in pixels of the browser window. The following is a basic example that displays the current window size:

ScrollPosition.tsx
import { useScrollPosition } from '@ridgehkr/useful'
 
function ScrollPosition() {
  const { x, y } = useScrollPosition()
 
  return (
    <div
      style={{
        minHeight: '150vh',
        textAlign: 'center',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: '150vw',
        backgroundColor: '#dedede',
      }}
    >
      <div>
        <p>
          Scroll X: <strong>{x}</strong>
        </p>
        <p>
          Scroll Y: <strong>{y}</strong>
        </p>
        <p>Scroll the window to see the X and Y values change.</p>
      </div>
    </div>
  )
}

API Reference

Hook Signature

useScrollPosition(): ScrollPosition

Parameters

useScrollPosition does not accept any parameters.

Return Value

The hook returns a ScrollPosition object with the following properties:

PropertyTypeDescription
xnumberThe number of pixels that the document is currently scrolled horizontally
ynumberThe number of pixels that the document is currently scrolled vertically