In order to create a smooth user experience for mobile users when the side-drawer menu is open, I have implemented overflow: hidden and height: 100vh on the App container (excluding the drawer) to prevent scrolling while the drawer is visible.
Typically, when the overflow and height properties are removed, the window will automatically scroll back to the top. To avoid this, I am saving the original scroll position before opening the drawer and restoring it when the drawer is closed using window.scrollTo(0, pos).
I have observed that Chrome does not allow programmatically scrolling until manual scrolling has been initiated. To test this behavior, I ran the following code:
if (!drawerIsOpen && drawerIsClosing) {
let done = false;
const interval = setInterval(() => {
if (window.scrollY !== this.props.store.app.scrollPosition) {
console.log('attempting');
window.scrollTo(0, this.props.store.app.scrollPosition);
} else {
clearInterval(interval);
}
}, 50);
}
The interval continues running indefinitely, but as soon as the window is manually scrolled, Chrome allows programmable scrolling and stops the interval. This behavior was not replicated in Safari or Firefox.
Could this be related to which element has focus? Does Chrome delay updating its internal scroll position knowledge until user interaction occurs?