Cómo evitar el desplazamiento de página al abrir un modal en Webflow y la solución para iOS Safari

El desplazamiento del fondo en los modales abiertos es uno de los errores de interacción más reportados en la comunidad de Webflow, y casi todas las soluciones publicadas allí funcionan en escritorio, pero fallan silenciosamente en iOS Safari.

El problema principal es que los navegadores interpretan overflow: hidden de forma diferente. Chrome y Firefox en escritorio lo respetan de inmediato. iOS Safari lo ignora por completo debido a su comportamiento de "desplazamiento elástico", ya que la implementación del viewport de Apple trata el desplazamiento como un gesto nativo que CSS no puede anular.

En esta guía, cubrimos cómo evitar el desplazamiento de la página cuando los modales están abiertos en Webflow: el método jQuery que maneja la mayoría de los casos, la opción sin código de Finsweet y la implementación completa compatible con iOS para cuando la conversión móvil realmente importa.

¿Qué hace que la página se desplace cuando los modales están abiertos en Webflow?

Los modales son elementos posicionados, no documentos separados. El navegador no sabe automáticamente que el contenido del fondo debe dejar de ser interactivo cuando aparece un modal, por lo que los eventos de desplazamiento siguen activándose en la página que está detrás.

Tres escenarios específicos provocan esto:

La causa subyacente es la misma en los tres casos: los eventos de desplazamiento se propagan hacia arriba en el árbol DOM. Cuando un usuario se desplaza dentro de un modal, el evento burbujea desde el elemento modal a través de sus padres hasta los elementos body y HTML.

Si esos elementos se pueden desplazar, responderán, aunque el modal los esté tapando visualmente.

¿Qué necesitas para evitar que la página se desplace cuando los modales están abiertos en Webflow?

Debes tener tres cosas listas antes de añadir cualquier código para evitar el desplazamiento. Si te falta alguna, la implementación fallará sin avisar o no tendrá efecto en las páginas publicadas.

Verifica que cuentas con estos requisitos previos.

Una estructura de modal con elementos de activación y contenedor

Tu modal de Webflow necesita al menos dos elementos: un botón o enlace que lo abra (elemento de activación) y un div contenedor que albergue el contenido del modal (elemento contenedor). Ambos necesitan nombres de clase a los que puedas hacer referencia en el código personalizado.

Acceso a código personalizado en tu plan de Webflow

Evitar el desplazamiento requiere añadir JavaScript a tu sitio. Esta función está disponible en los planes de pago de Webflow (alojamiento Basic, CMS, Business o Enterprise). Los sitios gratuitos no pueden añadir código personalizado.

Conocimientos de jQuery (útiles, pero no obligatorios)

Webflow incluye jQuery por defecto y la mayoría de las soluciones para evitar el desplazamiento lo utilizan. No necesitas escribir jQuery desde cero (solo copia y pega los fragmentos de código que te daré), pero entender la sintaxis básica de jQuery ayuda si necesitas personalizar los elementos de activación o añadir varios modales.

Una vez que tengas estos tres puntos listos, la implementación te llevará unos 10 minutos.

¿Qué método para evitar el desplazamiento deberías usar en Webflow?

El método adecuado depende de cuánto tráfico recibas desde iOS. Si tus modales son solo para escritorio o no son críticos, los métodos 1 o 2 te servirán en cuestión de minutos. Si la conversión en iOS es importante, ve directo al método 4.

Dos enfoques cubren la mayoría de los casos. El método jQuery te da control total y funciona en cualquier proyecto. El método de Finsweet no requiere JavaScript personalizado; solo atributos HTML y una única etiqueta de script.

Elige según tu configuración:

• Alternar con jQuery: Te sientes cómodo pegando un script o necesitas una lógica de activación personalizada
• Atributos de Finsweet: Quieres una implementación sin código o tienes varios modales en distintas páginas

Ambos funcionan en escritorio y Android; ninguno soluciona completamente iOS Safari sin la implementación avanzada de la sección de resolución de problemas.

Implemento el Método 2 (alternar con jQuery) en el 80% de los proyectos. Funciona en navegadores de escritorio y ofrece un comportamiento aceptable en móviles. Para sitios de comercio electrónico donde los modales impulsan las compras, uso el Método 4 para garantizar que iOS Safari funcione correctamente.

5 pasos para evitar el desplazamiento de página en modales de Webflow con el alternador de jQuery

Esta guía utiliza el Método n.º 2 (alternar con jQuery), que cubre la mayoría de los casos. Funciona de forma fiable en todos los navegadores de escritorio y ofrece un comportamiento aceptable en Android. iOS Safari requiere un manejo adicional que se trata en la sección de métodos avanzados.

Paso n.º 1: Añade nombres de clase a tus elementos modales

Abre el Diseñador de Webflow y selecciona el elemento que activa tu ventana modal (normalmente un botón o un enlace). En el panel de Ajustes, añade un nombre de clase como modal-trigger.

A continuación, selecciona el contenedor de tu ventana modal, el div principal que contiene todo el contenido modal. Añádele una clase como modal-container .

Por último, selecciona el botón de cerrar dentro de tu ventana modal. Añade una clase como modal-close.

Estos nombres de clase se convierten en los selectores que utiliza tu JavaScript para detectar clics y activar o desactivar el bloqueo de desplazamiento.

Paso 2: Ve a la configuración del proyecto y al código personalizado

Haz clic en el icono de configuración del proyecto en la barra lateral izquierda (el icono de engranaje) y luego selecciona la pestaña "Custom code" (Código personalizado).

Verás dos campos: uno para el código en la etiqueta <head> y otro para el código del pie de página (para el código antes de la etiqueta </body> ). El código para evitar el desplazamiento debe ir en el campo del pie de página, ya que debe ejecutarse después de que se cargue el DOM.

Paso 3: Pega el script para evitar el desplazamiento

Copia este código y pégalo en el campo de código del pie de página:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  // When modal opens
  $('.modal-trigger').click(function(e) {
    e.preventDefault();
    $('html, body').css('overflow', 'hidden');
  });

  // When modal closes
  $('.modal-close').click(function(e) {
    e.preventDefault();
    $('html, body').css('overflow', 'auto');
  });
});
</script>

Este script espera a que se inicialice el JavaScript de Webflow (mediante Webflow.push), y luego detecta los clics en tus botones de activación y cierre.

Cuando se hace clic en el activador, e.preventDefault() evita el comportamiento predeterminado del enlace y css('overflow', 'hidden') oculta las barras de desplazamiento tanto en los elementos html como en el body.

Cuando se hace clic en el botón de cerrar, css('overflow', 'auto') restaura el desplazamiento normal.

Aprovecha para añadir el cierre con teclado

Los usuarios esperan que la tecla Escape cierre las ventanas modales. Añade esto al mismo bloque de script, dentro de Webflow.push:

$(document).keydown(function(e) {
  if (e.key === 'Escape') {
    $('html, body').css('overflow', 'auto');
    $('.modal-container').hide(); // replace with your close logic
  }
});

Reemplaza .modal-container con lo que sea que gestione el cierre de tu ventana modal. Si utilizas las interacciones de Webflow para mostrar u ocultar la ventana modal, tendrás que activar esa interacción mediante programación o, en su lugar, hacer clic en el botón de cerrar.

Paso 4: Actualiza los nombres de las clases para que coincidan con tus elementos

Reemplaza .modal-trigger, .modal-container y .modal-close con los nombres de clase reales que asignaste en el paso 1.

Si tu botón de activación tiene la clase open-portfolio-modal, cambia $('.modal-trigger') por $('.open-portfolio-modal').

Asegúrate de incluir el punto antes del nombre de la clase; esa es la sintaxis del selector de clases de jQuery.

Paso 5: Publica y prueba en tu sitio web en vivo

Guarda tu código personalizado y luego publica tu sitio en Webflow.

El script no funcionará en el modo de vista previa del Diseñador, ya que el código personalizado solo se ejecuta en sitios publicados.

Abre tu sitio publicado en un navegador, haz clic en el activador de tu ventana modal e intenta desplazarte. La página detrás de la ventana debería permanecer inmóvil.

Prueba el botón de cerrar para verificar que el desplazamiento se reactive al cerrar la ventana modal.

Comportamiento esperado: Los navegadores de escritorio (Chrome, Firefox, Safari) deberían impedir por completo el desplazamiento del fondo. En los navegadores móviles los resultados pueden variar: generalmente funciona en Chrome para Android, mientras que en Safari para iOS es posible que aún se permita algo de desplazamiento.

Lo que no cubre el bloqueo de desplazamiento

Bloquear el desplazamiento es solo una parte de una ventana modal accesible. Si te detienes aquí, hay dos cosas más que fallarán para los usuarios de teclado y lectores de pantalla:

• Captura de foco: Cuando se abre una ventana modal, el foco del teclado debe moverse hacia ella y ciclar solo dentro de la misma hasta que se cierre. Sin esto, la tecla Tab seguirá moviéndose a través de los elementos ocultos detrás de la capa superpuesta. Añade tabindex="-1" a tu contenedor modal y llama a .focus() cuando la ventana se abra.
• Roles ARIA: Los lectores de pantalla necesitan role="dialog" y aria-modal="true" en el contenedor modal, además de aria-label o aria-labelledby apuntando al encabezado de la ventana. Sin esto, los usuarios de lectores de pantalla no recibirán ninguna señal de que se ha abierto una ventana modal.

Estas son adiciones de atributos personalizados en el panel de Configuración de Webflow; no se requiere código. Agrégalos directamente al elemento contenedor de la ventana modal.

3 pasos para evitar el desplazamiento de página en ventanas modales de Webflow con Finsweet Attributes (sin JavaScript personalizado)

Finsweet Attributes es el camino sin código. Una etiqueta de script en la Configuración del proyecto, un atributo personalizado en tu contenedor modal y el bloqueo de desplazamiento se activará automáticamente cada vez que las Interacciones de Webflow muestren u oculten la ventana.

Sin jQuery, escuchadores de eventos personalizados ni lógica de activación que mantener. Si gestionas varias ventanas modales en distintas páginas o buscas una solución que funcione sin tocar JavaScript, esta es la configuración más rápida.

Paso 1: Añade el script de Finsweet a la Configuración del proyecto

Ve a Configuración del proyecto → Código personalizado → Código del pie de página (Footer code).

Pega esto una vez:

<script async type="module"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
  fs-scrolldisable>
</script>

Cubre todas las soluciones de Finsweet Attributes en la página, por lo que no necesitarás añadirlo de nuevo si utilizas otras herramientas de Finsweet.

Paso 2: Añade el atributo a tu contenedor modal

Selecciona tu contenedor modal, es decir, el div envolvente que las Interacciones de Webflow controlan mediante Ocultar/Mostrar.

En el panel de Configuración, añade un atributo personalizado:

• Nombre: fs-scrolldisable-element
• Valor: scroll

Este atributo se aplica al elemento cuya visibilidad cambia, no al botón que lo activa. Finsweet detecta cuándo cambia el estado de visualización de ese elemento y activa automáticamente el bloqueo de desplazamiento.

Paso 3: Publicar y probar

Publica tu sitio. Abre el modal e intenta hacer scroll; la página de fondo debería quedar bloqueada. Cierra el modal y verifica que el desplazamiento se haya restaurado.

Comportamiento esperado: Consistente en navegadores de escritorio y Chrome para Android. Aún quedan casos aislados en iOS Safari, tal como reconoce la propia documentación de Finsweet. Si tu sitio utiliza el scroll suave de Lenis, consulta la sección de solución de problemas antes de implementarlo.

4 pasos para evitar el scroll de página en modales de Webflow en iOS Safari (la solución definitiva)

Cuándo usar esto: Si tu sitio recibe un tráfico importante desde iOS y tu modal está vinculado a una acción de conversión (captación de leads, compras, registros). Si el modal es meramente informativo y el desplazamiento de fondo no afecta al resultado, los métodos 2 o 3 son más rápidos de implementar. Ambos funcionan en escritorio y Android. Este método se encarga de iOS Safari.

El enfoque es distinto al del toggle de jQuery porque tiene que serlo. En lugar de configurar overflow: hidden en el body (que iOS ignora), congelas la página cambiando el body a position: fixed con un valor de top negativo igual a la posición actual del scroll.

Desde la perspectiva del usuario, la página se ve igual. Desde la perspectiva del navegador, ya no es un documento desplazable, por lo que iOS no tiene nada que mover.

Cuando el modal se cierra, restableces los estilos del body y llamas a window.scrollTo() para volver a la posición que guardaste. Si se hace correctamente, la transición es invisible.

Paso 1: Añadir el script de bloqueo de scroll para iOS en la configuración del proyecto

Ve a Configuración del proyecto → Código personalizado → Código del pie de página (Footer code) y pega esto:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  var scrollPosition = 0;

  function lockScroll() {
    scrollPosition = window.pageYOffset;
    $('body').css({
      'overflow': 'hidden',
      'position': 'fixed',
      'top': -scrollPosition + 'px',
      'width': '100%'
    });
  }

  function unlockScroll() {
    $('body').css({
      'overflow': '',
      'position': '',
      'top': '',
      'width': ''
    });
    window.scrollTo(0, scrollPosition);
  }

  // Open
  $('.modal-trigger').click(function(e) {
    e.preventDefault();
    lockScroll();
  });

  // Close (button click)
  $('.modal-close').click(function(e) {
    e.preventDefault();
    unlockScroll();
  });

  // Close (Escape key)
  $(document).keydown(function(e) {
    if (e.key === 'Escape') {
      unlockScroll();
    }
  });
});
</script>

La diferencia clave con el método 2 es position: fixed combinado con top: -scrollPosition. Esta combinación le indica a iOS Safari que, literalmente, no hay nada que desplazar, en lugar de pedirle que respete una regla de desbordamiento (overflow) que ignora.

Paso 2: Añadir overscroll-behavior a tu contenedor modal

Esto evita que el evento de scroll se propague fuera del modal si este tiene contenido desplazable (formularios largos, artículos, etc.).

Selecciona tu contenedor modal en el Diseñador de Webflow. En el panel de configuración, añade un atributo personalizado:

• Nombre: style
• Valor: overscroll-behavior: contain;

Alternativamente, añade esto en el CSS global de tu sitio (Configuración del proyecto → Código personalizado → <head>):

.modal-container {
  overscroll-behavior: contain;
}

Reemplaza .modal-container con el nombre de tu clase real. Sin esto, el scroll de los usuarios dentro del modal aún podría hacer que la página se mueva al llegar al principio o al final del contenido del modal.

Actualiza los nombres de las clases para que coincidan con tus elementos

Igual que en el Método n.º 2. Sustituye .modal-trigger, .modal-close, y .modal-container por los nombres de clase que hayas asignado en tu proyecto.

Paso n.º 3: Publica y prueba en un dispositivo iOS real

Este es el único método en el que las pruebas en un simulador de iOS no son lo suficientemente fiables. Publica en tu subdominio webflow.io, ábrelo en un iPhone o iPad físico con Safari, activa el modal e intenta hacer scroll.

Comportamiento esperado en iOS Safari: La página detrás del modal debe permanecer completamente inmóvil. Sin rebotes de scroll, sin desplazamientos del contenido de fondo. El scroll dentro del modal (si procede) debería funcionar con normalidad y detenerse en los límites del modal sin afectar a la página.

Comportamiento esperado en el resto de los casos: Idéntico al Método n.º 2; bloqueo total del scroll en Chrome, Firefox y Safari de escritorio; bloqueo total del scroll en Chrome para Android.

Un detalle a tener en cuenta: Si tu página tiene un encabezado fijo u otros elementos position: fixed, es posible que parpadeen brevemente cuando el cuerpo cambie a position: fixed. Es un efecto secundario estético conocido. Si resulta muy evidente, añade una transición CSS corta a esos elementos o suprime el cambio de estado visual con un cambio de clase durante el ciclo de bloqueo/desbloqueo.

¿Qué hace que la prevención del scroll falle en los modales de Webflow?

La mayoría de los fallos se deben a uno de estos cuatro motivos: probar en el entorno equivocado, una propiedad overflow en conflicto en un elemento padre, el comportamiento de scroll nativo de iOS Safari o un salto de página provocado por position: fixed interacciones.

Aquí te explicamos cómo identificar cuál es tu caso.

El código solo funciona en el sitio publicado, no en la vista previa del Diseñador

¿La prevención del scroll funciona perfectamente en el sitio publicado, pero no hace nada en el modo de vista previa del Diseñador o al probar con enlaces de vista previa?

Causa: El Diseñador de Webflow no ejecuta código personalizado durante la vista previa. Esto es intencionado. La vista previa del Diseñador carga una versión aislada de tu sitio que ignora los scripts de la Configuración del proyecto.

Solución: Prueba siempre la prevención del scroll en tu sitio publicado, nunca en la vista previa. Si necesitas probar antes de publicar en tu dominio de producción, publica en un dominio de pruebas o utiliza el subdominio webflow.io que proporciona Webflow.

La prevención del scroll falla cuando el modal está dentro de un contenedor

¿El scroll del fondo sigue funcionando aunque el script esté implementado correctamente? Al inspeccionar, se ve que la propiedad overflow está establecida en html/body, pero el scroll sigue activo.

Causa: Un div contenedor padre tiene overflow: auto o overflow: scroll configurado en tus estilos. Cuando los elementos anidados tienen propiedades overflow en conflicto, el contenedor desplazable más interno tiene prioridad.

Solución: Inspecciona los elementos padres de tu modal en el panel Navegador. Busca cualquier div contenedor que pueda tener configuraciones de overflow. Elimina las propiedades overflow de los contenedores o aplica overflow: hidden al elemento contenedor específico en lugar de a html/body.

Ajuste de código si vas a aplicar el objetivo a un contenedor en lugar del cuerpo:

$('.wrapper-class-name').css('overflow', 'hidden'); // Lock the wrapper
// Instead of:
$('html, body').css('overflow', 'hidden');

Tras actualizar el selector, vuelve a publicar y prueba. Si el scroll sigue filtrándose, abre las herramientas de desarrollo, inspecciona el elemento desplazable y busca cualquier div padre con overflow: auto o overflow: scroll configurado a nivel de CSS en lugar de en el panel de estilos de Webflow.

Esos no aparecerán en el Navegador, pero seguirán anulando tu bloqueo.

iOS Safari ignora por completo el overflow hidden

En navegadores de escritorio funciona de maravilla, pero los usuarios de iPhone y iPad siguen pudiendo hacer scroll en el fondo cuando los modales están abiertos.

Causa: iOS Safari trata el scroll como un gesto nativo que las propiedades CSS de overflow no pueden anular. El "efecto rebote" de Apple (ese rebote al llegar al final de la página) está implementado a nivel de navegador, no de CSS.

Solución: Las soluciones estándar de jQuery no sirven aquí. Necesitas una de estas opciones:

• Aceptar la limitación como una mejora progresiva (funciona en escritorio, pero no en móvil)
• Implementar Finsweet Attributes, que incluye gestión de eventos táctiles específica para iOS Safari
• Usar la implementación completa compatible con iOS que se detalla en la sección de funciones avanzadas (implica cálculos de altura del viewport y propiedades de overscroll-behavior)

No existe una solución solo con CSS para iOS Safari. Si tus analíticas muestran mucho tráfico desde iOS y tu modal es clave para una conversión (captación de leads, ventas, onboarding), merece la pena el esfuerzo extra de la implementación compatible con iOS.

Para modales informativos donde el scroll de fondo es molesto pero no impide la conversión, aceptar la limitación como una mejora pensada para escritorio es una decisión razonable.

El bloqueo de scroll de Finsweet no funciona con el scroll suave de Lenis

El bloqueo de scroll de Finsweet vigila los cambios en overflow en el body. El scroll suave de Lenis anula por completo el comportamiento nativo; usa JavaScript para controlar todo el movimiento, por lo que overflow: hidden no impide que Lenis siga funcionando.

Causa: Lenis funciona independientemente del estado de overflow del DOM. Decirle al body que oculte el overflow no afecta al bucle de animación de Lenis.

Solución: Debes llamar a lenis.stop() y lenis.start() directamente en los disparadores de apertura/cierre de tu modal, en lugar de (o además de) usar el atributo de Finsweet.

Aquí tienes una versión mínima:

// When modal opens
$('.modal-trigger').click(function() {
  window.lenis.stop();
});

// When modal closes
$('.modal-close').click(function() {
  window.lenis.start();
});

Si window.lenis no está accesible en tu configuración, revisa dónde se inicializa tu instancia de Lenis y exponla de forma global, o mueve este código al mismo bloque de script donde está configurado Lenis.

La página salta al principio al abrir el modal

El modal se abre correctamente y el scroll se bloquea, pero la posición de la página se reinicia al principio cuando aparece el modal.

Causa: Establecer position: fixed en los elementos body o html (una alternativa común a overflow: hidden) cambia el contexto del scroll. El navegador interpreta que el body ya no tiene scroll y reinicia la posición a 0.

Solución: Guarda la posición del scroll antes de bloquear, aplícala como una posición superior negativa y restáurala al desbloquear:

var scrollPosition = 0;

// When modal opens
$('.modal-trigger').click(function(e) {
  e.preventDefault();
  scrollPosition = window.pageYOffset;
  $('body').css({
    'overflow': 'hidden',
    'position': 'fixed',
    'top': -scrollPosition + 'px',
    'width': '100%'
  });
});

// When modal closes
$('.modal-close').click(function(e) {
  e.preventDefault();
  $('body').css({
    'overflow': 'auto',
    'position': 'static',
    'top': '0'
  });
  window.scrollTo(0, scrollPosition);
});

Esto captura la posición actual del scroll, la aplica como un valor superior negativo para mantener el contenido visualmente en su sitio y luego vuelve a esa posición al cerrar el modal.

Crea modales en Webflow que no necesiten apaños

Evitar el desplazamiento soluciona un problema de comportamiento del navegador. Sin embargo, los modales nativos de Webflow aún requieren código personalizado para el atrapamiento del foco, el cierre con teclado y los roles ARIA; la lista de verificación completa para producción no termina solo con el desplazamiento.

Si estás creando algo orientado a la conversión, la plataforma para desarrolladores de Webflow te ofrece los elementos básicos para ir más allá: componentes personalizados, integración con API REST y las herramientas necesarias para ampliar lo que el Diseñador no puede hacer de forma nativa.

Explora la documentación para desarrolladores de Webflow para una personalización más profunda más allá de lo que el Diseñador de Webflow maneja de forma nativa.