In the React app I'm working on, there's a search results page where users can apply filters. These filter selections update the query params in the URL and trigger a re-mount in React. However, I've encountered an issue across different browsers. When filters are located within overflow-y containers, the position of the child overflow affects the window scroll position upon re-mount. Here's an example to illustrate this problem:
- Scroll down within a child div containing a checkbox (let's say you're 70% down the div)
- Click on a checkbox filter
- The component re-mounts
- Despite the previous main window scroll location, it is now scrolled down by 70%
I attempted setting restoration to manual, but that didn't resolve the issue. Additionally, trying to manually capture the scroll position using window.scrollY and similar methods only returns the scroll position of the child element.