jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador CSS overscroll-behavior

Genera CSS overscroll-behavior para controlar pull-to-refresh y encadenamiento de desplazamiento.

Cargando herramienta...

Qué es Generador CSS overscroll-behavior?

overscroll-behavior controla lo que sucede cuando un área desplazable alcanza su límite. En dispositivos móviles, el desplazamiento excesivo puede activar pull-to-refresh o permitir que el desplazamiento se filtre de un modal a la página detrás de él. Esta propiedad le permite contener o prevenir los efectos de desplazamiento excesivo en elementos body, modal, sidebar y carousel.

Respuesta rápida

Controle lo que sucede cuando un elemento desplazable alcanza su límite. Use contain para detener la cadena de desplazamiento mientras mantiene el efecto de rebote, o none para eliminar todos los efectos de desplazamiento excesivo incluyendo pull-to-refresh.

Last updated: 2026-06-11

Limitaciones

  • Overscroll-behavior es principalmente una preocupación móvil. Los navegadores de escritorio aplican efectos de desplazamiento excesivo mínimos o nulos, por lo que la propiedad tiene poco impacto visual en escritorio.
  • Probar overscroll-behavior en escritorio requiere emulación de dispositivo en DevTools porque el comportamiento del scroll con ratón difiere significativamente de los gestos táctiles.
  • overscroll-behavior solo controla la cadena de desplazamiento en el límite del documento. No evita la propagación del desplazamiento dentro de contenedores desplazables anidados que no están en el borde del viewport. Para contención de desplazamiento interna, use también overscroll-behavior en el contenedor interno.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione un escenario que coincida con dónde desea controlar el comportamiento de desplazamiento excesivo.
  2. Elija el comportamiento: contain para detener la cadena de desplazamiento pero mantener el rebote, o none para prevenir todos los efectos de desplazamiento excesivo.
  3. Seleccione el eje si solo desea controlar el desplazamiento excesivo horizontal o vertical por separado.
  4. Copie el CSS y pruébelo en un dispositivo móvil real para confirmar el comportamiento esperado.

Para qué puedes usarla

  • Prevenir pull-to-refresh en el body de una página mientras se mantiene el desplazamiento vertical funcional.
  • Detener el desplazamiento de la página de fondo cuando un modal o panel lateral está abierto.
  • Contener el desplazamiento horizontal en un carrusel para que no active la navegación hacia atrás o adelante.

Casos de uso

Ejemplos prácticos

Ejemplo

Prevenir pull-to-refresh

Una página de aplicación web quiere deshabilitar pull-to-refresh mientras mantiene el desplazamiento normal. overscroll-behavior: contain en el body detiene el gesto de actualización sin bloquear el desplazamiento.

Ejemplo

Modal con bloqueo de desplazamiento

Un diálogo modal tiene su propio contenido desplazable. overscroll-behavior: contain en la superposición del modal evita que el desplazamiento se filtre a la página detrás.

Errores comunes

  • Aplicar overscroll-behavior: none al elemento body, lo que deshabilita completamente el pull-to-refresh y puede frustrar a los usuarios móviles.
  • Establecer overflow: hidden en el body para bloquear el desplazamiento del modal en lugar de usar overscroll-behavior.
  • Olvidar probar en dispositivos móviles reales donde los efectos de desplazamiento excesivo difieren de la emulación de escritorio.

Verificación

  1. Pruebe el comportamiento en un dispositivo móvil real desplazándose más allá del límite del elemento destino y confirmando el comportamiento esperado de pull-to-refresh o cadena de desplazamiento.
  2. Use el modo de dispositivo de Chrome DevTools con emulación táctil activada para aproximar el comportamiento de desplazamiento excesivo móvil en escritorio.

FAQ

Preguntas sobre Generador CSS overscroll-behavior

¿Cuál es la diferencia entre contain y none?

contain detiene la cadena de desplazamiento hacia el padre pero mantiene el efecto visual de rebote o resplandor en el límite. none previene tanto la cadena como el efecto visual de desplazamiento excesivo.

¿Debería usar overscroll-behavior en lugar de overflow: hidden para modales?

overscroll-behavior es mejor para prevenir la fuga de desplazamiento mientras mantiene el modal desplazable. Úselo junto con una técnica de position fixed, no en lugar de ella.

¿Afecta overscroll-behavior al pull-to-refresh?

Sí. overscroll-behavior: contain en el elemento body previene el gesto de pull-to-refresh del navegador mientras permite el desplazamiento normal de la página. Esto es útil para aplicaciones web que manejan la actualización o navegación por sí mismas.

¿Puedo aplicar diferentes valores a x e y?

Sí. Use la sintaxis de dos valores overscroll-behavior: contain auto para establecer diferentes comportamientos para cada eje. El primer valor se aplica al eje x y el segundo al eje y.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también