How to detect if browser window is "near" the bottom?

user_16590740 0
Viewed 289

I'm using the infinite scrolling for my react app and have this function that detects when I'm exactly at the bottom of the page:

const [isFetching, setIsFetching] = useState(false);

// Fire Upon Reaching the Bottom of the Page
  const handleScroll = () => {
    if (
      window.innerHeight +
        Math.max(
          window.pageYOffset,
          document.documentElement.scrollTop,
          document.body.scrollTop
        ) !==
      document.documentElement.offsetHeight
    )
      return;

    setIsFetching(true);
  };

  // Debounce the Scroll Event Function and Cancel it When Called
  const debounceHandleScroll = debounce(handleScroll, 100);

  useEffect(() => {
    window.addEventListener("scroll", debounceHandleScroll);
    return () => window.removeEventListener("scroll", debounceHandleScroll);
  }, [debounceHandleScroll]);

  debounceHandleScroll.cancel();

The problem lies when I load my page in my phone and it seems that because of the tab or bar of the mobile browser, it's not detecting the bottom of the page and so the content doesn't load.

Is there any way I can detect that the user is near the bottom and fire that function only then?

reactjs html javascript
2 Answers

I think an IntersectionObserver could be what you're looking for. You can check this tutorial for for basic information: https://dev.to/producthackers/intersection-observer-using-react-49ko

You could also turn this into a custom hook which takes a ref (in your case, a n element at the bottom of you page):

import { useEffect, useState } from 'react';

const useIsVisible = ref => {
  const [isIntersecting, setIntersecting] = useState(false);

  const observer = new IntersectionObserver(([entry]) =>
    setIntersecting(entry.isIntersecting),
  );

  useEffect(() => {
    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, []);

  return isIntersecting;
};

export default useIsVisible;

Maybe also the following package might help you, it makes implementing infinity scroll quite easy:

https://www.npmjs.com/package/react-infinite-scroll-component

user_158256010

I managed to changed the scroll function into this and now it's working.

  const handleScroll = () => {
    if (
      window.innerHeight +
        Math.max(
          window.pageYOffset,
          document.documentElement.scrollTop,
          document.body.scrollTop
        ) >
      document.documentElement.offsetHeight - 100
    ) {
      setIsFetching(true);
    } else {
      return;
    }
  };

The number that's being reduced from document.documentElement.offsetHeight determines the amount remaining from the bottom of the page. 100 seems enough for me since I tested it on my phone and it works.

user_165907400
Related