Encontré esta guía que funciona: https://codepen.io/geoffgraham/pen/LogERe
Creé este ayudante que usa el código en mi aplicación de reacción:
export const removeBodyScrollingWhenModalOpen = ( modalOpen: boolean, ) => { if (modalOpen) { document.body.style.position = 'fixed'; document.body.style.top = `-${window.scrollY}px`; } else { const scrollY = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1); } };
Cuando se usa con el modal:
const handleClose = () => { onClose(false); removeBodyScrollingWhenModalOpen(false); }; useEffect(() => { removeBodyScrollingWhenModalOpen(open); }, [open]);
Sin embargo, para que el código funcione correctamente y no pierda la posición de desplazamiento cuando se cierra el modal, necesito agregar este fragmento de código:
window.addEventListener('scroll', () => { document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`); });
Pero no estoy seguro de cómo implementar eso con mi gancho anterior, ¿alguna idea?