title: ReactJS: element.ScrollLeft does not change value after resizing window
body: <p>I have a state called <code>scrollStatus</code>, where I track the current scroll position of a div, and I set its value using a ref and <code>element.scrollLeft</code> when scrolling:</p>
  <pre><code>const scrollHandle = () =&gt; {
  setScrollStatus(container.current?.scrollLeft);
  console.log(scrollStatus);
  }
  </code></pre>
  <p>So when doing <code>console.log</code> I get a different value of <code>scrollStatus</code>, which is what I want:</p>
  <p><a href="https://i.stack.imgur.com/b6Tzb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b6Tzb.png" alt="enter image description here" /></a></p>
  <p>When I resize the window by a large margin (let's say from desktop to mobile view), the scroll value will change drastically, which I expected for it to happen since my container's width is percentage based.</p>
  <p>Here in the console, you can see the value changed to <code>375</code> after I resize the window to mobile view:</p>
  <p><a href="https://i.stack.imgur.com/zYAxA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zYAxA.png" alt="enter image description here" /></a></p>
  <p>However, when I try to scroll again after resizing the window, the value of <code>scrollStatus</code> doesn't change. It retains the current position value after I resize the window:</p>
  <p><a href="https://i.stack.imgur.com/bOH7l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bOH7l.png" alt="enter image description here" /></a></p>
  <p>(The value still won't change even if I resize the window again)</p>
  <p>Any idea what's going on here and how to fix it?</p>