A hook that detects the current scroll direction.
This page's body does not scroll, so the behavior can't be tried here. Please verify on an actual scrollable page.
options.thresholdnumber50options.targetRefObject<HTMLElement | null>window| Prop | Type | Default |
|---|---|---|
options.threshold | number | 50 |
options.target | RefObject<HTMLElement | null> | window |
x'left'|'right'y'up'|'down'| Prop | Type | Default |
|---|---|---|
x | 'left'|'right' | - |
y | 'up'|'down' | - |
import { useScrollDirection } from '@k8ordo/ui';const { x, y } = useScrollDirection();
return (
<div>
<span>Vertical: {y}</span>
<span>Horizontal: {x}</span>
</div>
);const scrollRef = useRef<HTMLDivElement>(null);
const { y } = useScrollDirection({ target: scrollRef, threshold: 20 });
return (
<div ref={scrollRef} style={{ overflow: 'auto', height: 128 }}>
{/* scrollable content */}
</div>
);