useScrollDirection

useScrollDirection is a React hook that detects scroll direction. It returns scroll direction (up/down) and current scroll position. Throttled by default (50ms) for performance.

Interface

function useScrollDirection(
  options: UseScrollDirectionOptions
): ScrollDirectionState;

Parameters

• optionsUseScrollDirectionOptions
  

  Configuration options.

  • options.throttleMsnumber · 50
    

    Throttle interval in milliseconds.

Return Value

• ScrollDirectionState
  

  direction state: direction (\'up\' | \'down\' | null) and position (px).

Example

function Header() {
  const { direction, position } = useScrollDirection();

  // Hide header on scroll down
  const isHidden = direction === 'down' && position > 100;

  return <header className={isHidden ? 'hidden' : 'visible'}>My Header</header>;
}