Detecting scroll direction using hooks

Question

Here is my code:

const [scollPosition, setSrollPosition] = useState(0);

const handleScroll = () => {
  const position = window.pageYOffset;
  console.log(position);
  if (position > scollPosition) {
    console.log("down");
  } else {
    console.log("up");
  }
  setSrollPosition(position);
};

useEffect(() => {
  window.addEventListener("scroll", handleScroll, { passive: true });
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

But it doesn't work, because setSrollPosition(position) didn't update the value of scollPositon.

This code seems to be working: https://codesandbox.io/s/kind-elbakyan-podgr — zecuria, Aug 30 '21 at 05:14
Thank you for your comment , but if you check scroll up , it doesn't work — Lunkai Yang, Aug 30 '21 at 05:18
Sorry not sure I understand what you mean by scroll up. It seems like scrolling up and down is updating the state. — zecuria, Aug 30 '21 at 05:21
https://stackoverflow.com/questions/62497110/detect-scroll-direction-in-react-js — Hamid Shoja, Aug 30 '21 at 05:33
I've got a solution for you below, try out the live example. — Ryan Le, Aug 30 '21 at 05:36

score 0 · Accepted Answer · answered Aug 30 '21 at 05:31

It's the nature of Reactjs's state, it's updated asynchronously

For your case, use useRef() instead, so you won't need to care about the thing above:

const scollPosition = useRef(0);

  const handleScroll = () => {
    const position = window.pageYOffset;
    console.log(position);
    if (position > scollPosition.current) {
      console.log("down");
    } else {
      console.log("up");
    }
    scollPosition.current = position;
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

Working example:

function App() {
  const scollPosition = React.useRef(0);

  const handleScroll = () => {
    const position = window.pageYOffset;
    console.log(position);
    if (position > scollPosition.current) {
      console.log("down");
    } else {
      console.log("up");
    }
    scollPosition.current = position;
  };

  React.useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div>
<div id="root"></div>

Detecting scroll direction using hooks

1 Answers1

It's the nature of Reactjs's state, it's updated asynchronously

Working example: