In viewport React

const handleScroll = () => {
    const pageYOffset = window.pageYOffset;
    const windowHeight = window.innerHeight;
    const elementOffsetTop = ref?.current?.offsetTop ?? 0;
    const elementHeight = ref?.current?.offsetHeight ?? 0;
    const scrollDirectionToTop = pageYOffset < prevPageYOffset.current;
    const distanceFromTop = pageYOffset + elementOffsetTop;
    const inViewport =
      pageYOffset >= elementOffsetTop - windowHeight &&
      pageYOffset <= elementOffsetTop + elementHeight;


    if (inViewport) {}

    prevPageYOffset.current = pageYOffset;
  };