useScrollDirection

Interface

function useScrollDirection(): void;

Parameters

• options.throttleMsrequired ·
  

  Throttle interval (default: 50ms)

Return Value

• 
  

  direction state (direction: \'up\' | \'down\' | null, position: number)

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>;
}