useHasOverflow

Detects whether an element has scrollable overflow horizontally or vertically — i.e. whether its scrollWidth/scrollHeight exceed its clientWidth/clientHeight. Optionally observes DOM mutations to keep overflow state up to date.

Use this hook when you need to know whether a container has scrollable content (for example, to toggle a Card.Header divider or Dialog.Body dividers). For detecting whether rendered content is being clipped (e.g. truncation tooltips), use useHasContentOverflow — it measures the content's rendered rect with sub-pixel precision and avoids false positives caused by scrollWidth rounding.

Import#

import { useHasOverflow } from '@volue/wave-react';

Example#

A typical use of this hook is conditionally adding a divider to the header of a scrollable surface like Card or Dialog only when its body becomes scrollable. Add or remove items below to see the divider appear and disappear as the body's scrollHeight crosses its clientHeight.

API Reference#

Arguments#

Returns#

[setElement: (el: T | null) => void, hasHorizontalOverflow: boolean, hasVerticalOverflow: boolean] — A tuple with a ref callback and two booleans indicating overflow state.