Breaking News: Grepper is joining You.com. Read the official announcement!

scroll in react with hooks

Thoughtless Teira answered on October 26, 2022 Popularity 5/10 Helpfulness 3/10

answer scroll in react with hooks

scroll in react with hooks

Comment

const [scrolling, setScrolling] = useState(false);
  const [scrollTop, setScrollTop] = useState(0);

  useEffect(() => {
    function onScroll() {
      let currentPosition = window.pageYOffset; // or use document.documentElement.scrollTop;
      if (currentPosition > scrollTop) {
        // downscroll code
        setScrolling(false);
      } else {
        // upscroll code
        setScrolling(true);
      }
      setScrollTop(currentPosition <= 0 ? 0 : currentPosition);
    }

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [scrollTop]);

Popularity 5/10 Helpfulness 3/10 Language css

Source: stackoverflow.com

Tags: css scroll

Link to this answer
Share Copy Link