useIsBottom()
useIsBottom(
offset
?,element
?,debounce
?,initialValue
?):boolean
Defined in: src/hooks/dom/useIsBottom.ts:62
A custom React hook to track whether a specific element (or the page) is scrolled to the bottom. It supports global targets (e.g., window
or document.documentElement
) and specific HTMLElement
s.
Parameters
offset?
number
= 0
The offset in pixels to consider as "bottom". If the scroll position is within this offset, it is considered at the bottom.
element?
The target element to observe scroll position. Defaults to globalThis
(commonly window
).
null
| HTMLElement
debounce?
number
= 0
The debounce delay in milliseconds for scroll and resize events. Defaults to 0
(no debounce).
initialValue?
boolean
= false
The initial value for isBottom
. Defaults to false
.
Returns
boolean
isBottom
- Whether the target element is currently scrolled to the bottom.
Examples
Example: Observing the scroll position of the page
import { useIsBottom } from '@zl-asica/react';
const MyComponent = () => {
const isBottom = useIsBottom(50); // Consider 50px offset as bottom
return (
<div>
<p>{isBottom ? "You're at the bottom!" : "Scroll down!"}</p>
<div style={{ height: '200vh', background: 'linear-gradient(to bottom, red, blue)' }} />
</div>
);
};
Example: Observing the scroll position of a specific container
import { useRef } from 'react';
import { useIsBottom } from '@zl-asica/react';
const MyComponent = () => {
const containerRef = useRef<HTMLDivElement | null>(null);
const isBottom = useIsBottom(50, containerRef.current); // Observe a specific container
return (
<div>
<p>{isBottom ? "Container is at the bottom!" : "Scroll more!"}</p>
<div
ref={containerRef}
style={{
height: '200px',
overflowY: 'scroll',
background: 'lightgray',
}}
>
<div style={{ height: '500px' }}>Scrollable content</div>
</div>
</div>
);
};