Why react-router scroll restoration ( window.scrollTo(0, 0); ) as explained on React-Router docs doesnt work if there is overflow-x: hidden on body?

Question

I recently had this issue where the Scroll restoration as explained on https://reactrouter.com/web/guides/scroll-restoration didn't work.

I posted this question:

React <ScrollToTop> component problem: I can't get it to work

The cause of this issue was a overflow-x: hidden; on the body element.

I am curious to know, and will appreciate if anyone can explain what is really happening behind the scenes, in the DOM, that is causing issue with:

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

when there is overflow-x:hidden; on the body element.