useScrollListener

Listen for scroll event in an efficient way.

Usage

useScrollListener listens for scroll event using Passive Events and requestAnimationFrame. It ensures to be as performant as possible while listening scroll.

Remember that listening scroll is the latest solution to choose, be sure that an Intersection Observer is not the answer to your problem.

import { useState } from "react";
import { useScrollListener } from "swash/utils/useScrollListener";

function Example({ onChange }) {
  const [top, setTop] = useState(null);
  const scrollRef = useScrollListener((event) => {
    setTop(event.srcElement.scrollTop);
  });
  return (
    <div ref={scrollRef} style={{ overflow: "auto" }}>
      {/* ... */}
    </div>
  );
}