useIsBottom()

useIsBottom(offset?, element?, debounce?, initialValue?): boolean

Defined in: hooks/dom/useIsBottom.ts:60

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 HTMLElements.

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).

HTMLElement | null

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>
  );
};