POLITICA DE COOKIES

Q2BSTUDIO.COM utiliza cookies técnicas, analíticas, de sesión y de publicidad con la finalidad de prestar un mejor servicio. No obstante, necesitamos su consentimiento explícito para poder utilizarlas. Así mismo puede cambiar la configuración de las cookies u obtener más información aquí .

Prevenir que una página se desplace mientras un diálogo está abierto

Prevenir el desplazamiento de la página durante un diálogo.

Publicado el 01/12/2025

Chrome 144 introduce un cambio pequeño pero muy útil en la propiedad CSS overscroll-behavior: ahora también se aplica a contenedores que no son desplazables. En la práctica esto soluciona un problema antiguo: impedir que la página de fondo se desplace mientras un diálogo o modal está abierto. Antes, en móviles y algunos navegadores, al abrir un diálogo seguía siendo posible desplazar la página con gestos táctiles, y los desarrolladores tenían que recurrir a trucos como fijar la posición del body, calcular y restaurar scroll, o interceptar eventos touchmove para evitar el desplazamiento.

Con la mejora de Chrome 144 basta con aplicar overscroll-behavior de forma adecuada en el contenedor del diálogo o en el overlay para evitar la propagación del gesto de desplazamiento al documento raíz. Por ejemplo, usar overscroll-behavior: contain o overscroll-behavior: none en el overlay impide que el gesto de scroll dentro del diálogo haga que la página completa se mueva. Esto simplifica la implementación de modales accesibles y mejora la experiencia en dispositivos táctiles sin emplear hacks complejos.

Si necesitas compatibilidad con navegadores más antiguos, sigue siendo recomendable implementar un fallback JavaScript que bloquee el scroll del body mientras el diálogo está abierto o usar bibliotecas que gestionen el bloqueo de scroll de forma segura. En cualquier caso, la nueva capacidad de Chrome reduce la necesidad de soluciones quirúrgicas y facilita un comportamiento más consistente entre plataformas.

En Q2BSTUDIO somos especialistas en desarrollo de soluciones a medida y entendemos la importancia de una interfaz sólida y libre de comportamientos inesperados. Si tu proyecto incluye interfaces web complejas, modales o componentes táctiles podemos ayudarte a implementar patrones modernos y seguros como este, además de desarrollar aplicaciones a medida y software a medida para todo tipo de necesidades. Descubre cómo trabajamos en desarrollo de aplicaciones y software multiplataforma.

También ofrecemos servicios avanzados de inteligencia artificial, agentes IA y soluciones IA para empresas que pueden integrarse en interfaces web para mejorar la interacción y automatizar flujos. Conoce nuestras capacidades en inteligencia artificial aplicada a negocios. Además, en Q2BSTUDIO combinamos experiencia en ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, agentes IA y power bi para ofrecer proyectos completos que cubren desde el desarrollo frontend hasta la protección y escalado en la nube.

Palabras clave relevantes: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Si necesitas asesoría técnica o un partner para llevar tu producto al siguiente nivel, ponte en contacto con nuestro equipo y diseñaremos la solución más adecuada para tu organización.

Fin del artículo, inicio de la diversión
Construyendo software juntos

Dando vida a tus ideas desde 2008

Diseñamos aplicaciones móviles y de escritorio innovadoras que cumplen con tus requisitos específicos y mejoran la eficiencia operativa.
Más info
Cuéntanos tu visión
Sea cual sea el alcance, podemos convertir tu idea en realidad. Envíanosla y charlemos sobre tu proyecto o una colaboración futura.
Contáctanos
artículos destacados
Live Chat
Enviado correctamente.

Gracias por confiar en Q2BStudio