useScrollOverflow
Tracks scroll overflow state for a horizontally scrollable container. Returns a ref callback and state booleans that update as the user scrolls or the container resizes. Uses scroll event listeners and ResizeObserver for reactive updates. Tolerance of 1px is applied to avoid sub-pixel false positives.
@astryxdesign/core/hooks
Signature
Call shape
useScrollOverflow()Returns
| Name | Type and behavior |
|---|---|
scrollRef | React.RefCallback<HTMLElement>Ref callback to attach to the horizontally scrollable container element. |
overflowStart | booleanWhether content overflows the start edge (left in LTR, right in RTL). |
overflowEnd | booleanWhether content overflows the end edge (right in LTR, left in RTL). |
hasOverflow | booleanWhether the container has any scroll overflow at all (scrollWidth > clientWidth). |
Usage
Tracks scroll overflow state for a horizontally scrollable container. Returns a ref callback and state booleans that update as the user scrolls or the container resizes. Uses scroll event listeners and ResizeObserver for reactive updates. Tolerance of 1px is applied to avoid sub-pixel false positives.
- Use to show/hide scroll navigation buttons or fade edges on carousels and horizontal lists.
- Apply the scrollRef to a container with overflow-x: auto or overflow-x: scroll.
- Use for vertical scroll tracking; this hook only measures horizontal overflow.