Track Scroll Progress

Track the scroll progress of a single section.

useSectionScroll() provides a callback to update the scroll progress without triggering re-renders. If you are using an animation library like react-spring or frame-motion, you can use the callback to update the animation value.

Alternatively, useSectionScrollState() provides the scroll progress as a state, which is just a simple wrapper around useSectionScroll().

Usage

import { useSectionScrollState } from '@react-scrollytelling/core';

export const Section = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const { isIntersecting, scrolledRatio } = useSectionScrollState(sectionRef);

  return (
    <>
      <section ref={sectionRef}>
        <p>isIntersecting: {`${isIntersecting}`}</p>
        <p>scrolledRatio: {`${scrolledRatio}`}</p>
      </section>
    </>
  );
};

Parameters

The useIntersectionObserver hook accepts the following parameters:

export function useSectionScroll(
  sectionRef: React.RefObject<Element>,
  onScroll: (scrollInfo: SectionScrollInfo) => void,
  shouldObserve = true,
  options?: IntersectionObserverOptions
) // ...

• sectionRef: The reference to the section element.
• onScroll - The callback to track the scroll ratio
  • scrollInfo: An object that contains the following properties:
    • isIntersecting: Whether the section is intersecting with the viewport.
    • scrollRatio: The ratio of the section that is above the bottom of the viewport. The value ranges from 0 to 1.
    • scrollBottom: The distance from the top of the page to the page position of the bottom of the viewport (scrollTop + windowHeight).
    • distance: The distance from the top of the section to the bottom of the viewport.
• shouldObserve: A boolean that determines whether to observe the element. You can disable the observer by setting this value to false. Default value: true.
• options: Allow customizing the observer. You can pass an IntersectionObserverOptions object to configure the observer.

Example

• isIntersecting: false
• scrolledRatio: 0