useScroll
Get the scroll position of an element.
Overview
Get the scroll position of an element.
Installation
Open inpnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useScroll.jsonnpx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useScroll.jsonyarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useScroll.jsonbun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useScroll.jsonGet the scroll position of an element.
Examples
Basic Usage
Detect Whole Page Scroll
Control listen on scroll status
API
const position = useScroll(target, shouldUpdate);Params
| Property | Description | Type | Default |
|---|---|---|---|
| target | DOM element or ref object | Element | Document | (() => Element) | MutableRefObject<Element> | document |
| shouldUpdate | Whether update position | ({ top: number, left: number }) => boolean | () => true |
Result
| Property | Description | Type |
|---|---|---|
| position | The current scroll position of the element. | { left: number, top: number } | undefined |
useSafeState
It is exactly the same with React.useState , but after the component is unmounted, the setState in the asynchronous callback will no longer be executed to avoid memory leakage caused by updating the state after the component is unmounted.
useSelections
This hook is used for Checkbox group, supports multiple selection, single selection, select-all, select-none and semi-selected etc.