useContainerScroll

Layout/Viewport

A React hook that tracks scroll position, dimensions, and scrolling state of a container element with real-time updates and debounced scrolling indicator.

Installation

npm install @thibault.sh/hooks

API Reference

Signature


interface ContainerScroll {
  scrollTop: number;
  scrollLeft: number;
  scrollWidth: number;
  scrollHeight: number;
  clientWidth: number;
  clientHeight: number;
  isScrolling: boolean;
}

function useContainerScroll(
  containerRef: RefObject<HTMLElement | null>, 
  delay?: number
): ContainerScroll

Parameters

Name	Type	Description	Default
`containerRef`	RefObject<HTMLElement \| null>	React ref object pointing to the scrollable container element.	-
`delay` optional	number	Delay in milliseconds before setting isScrolling to false.	`150`

Returns

ContainerScroll

An object containing scroll position, dimensions, and scrolling state.

Properties:

Property	Type	Description
`scrollTop`	number	Vertical scroll position in pixels.
`scrollLeft`	number	Horizontal scroll position in pixels.
`scrollWidth`	number	Total scrollable width of the content.
`scrollHeight`	number	Total scrollable height of the content.
`clientWidth`	number	Visible width of the container.
`clientHeight`	number	Visible height of the container.
`isScrolling`	boolean	Boolean indicating if the user is currently scrolling (debounced).