Scroll Chaining (Propagación de Scroll)

/* Problema: Scroll Chaining en un modal */ /* Cuando el usuario hace scroll hasta el final del modal, el scroll se propaga al body detrás del modal */ /* Solución 1: CSS overscroll-behavior */ .modal-contenido { max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; /* Evita propagación */ } /* Opciones de overscroll-behavior: - auto: comportamiento por defecto (propaga) - contain: no propaga al padre - none: no propaga y desactiva efectos de rebote */ /* Solución 2: Bloquear scroll del body cuando modal está abierto */ body.modal-abierto { overflow: hidden; position: fixed; /* Evita saltos en iOS */ width: 100%; } // React: Hook para manejar scroll del body function useBlockScroll(isOpen: boolean) { useEffect(() => { if (isOpen) { const scrollY = window.scrollY; document.body.style.overflow = 'hidden'; document.body.style.position = 'fixed'; document.body.style.top = `-${scrollY}px`; document.body.style.width = '100%'; return () => { document.body.style.overflow = ''; document.body.style.position = ''; document.body.style.top = ''; document.body.style.width = ''; window.scrollTo(0, scrollY); }; } }, [isOpen]); } // Uso function Modal({ isOpen, children }) { useBlockScroll(isOpen); if (!isOpen) return null; return <div className="modal">{children}</div>; }