useScrollPosition

Instalación

npm i @raddix/use-scroll-position

Uso

Obtener la posición de desplazamiento del documento

En este ejemplo, obtenemos la posición de desplazamiento del documento.

import { useScrollPosition } from '@raddix/use-scroll-position';

const App = () => {
  const { x, y } = useScrollPosition();

  return (
    <div>
      <p>Scroll position: {x}px, {y}px</p>
    </div>
  );
};

Obtener la posición de desplazamiento de un elemento

Para obtener la posición de desplazamiento de un elemento desplazable, en lugar del documento, podemos pasar una ref a la opción target.

import { useRef } from 'react';
import { useScrollPosition } from '@raddix/use-scroll-position';

const App = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { x, y } = useScrollPosition({ target: ref });

  return (
    <div ref={ref}>
      <p>Scroll position: {x}px, {y}px</p>
    </div>
  );
};

API

Parámetros

El hook useScrollPosition acepta un único parámetro de objeto con las siguientes opciones:

Valor devuelto

El hook useScrollPosition devuelve un objeto con dos propiedades: