Herramientas CSS

Gratis CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Cargando herramienta...

Qué es CSS Scroll-State Query Generator?

Una consulta de contenedor scroll-state es una función CSS que permite estilizar elementos según el estado de desplazamiento de un contenedor. En lugar de usar JavaScript para detectar la posición de desplazamiento y alternar clases, escribe una consulta @container scroll-state(...) que aplica estilos automáticamente cuando los elementos están ajustados (snapped), fijos (stuck) o cuando un contenedor es desplazable. Esto permite IU impulsada por desplazamiento como indicadores de carrusel activos y sombras de encabezado fijo sin JavaScript.

Respuesta rápida

Use consultas CSS scroll-state() dentro de reglas @container para estilizar elementos según la posición de desplazamiento sin JavaScript. Apunte a estados snapped, stuck, scrollable o overflowing. Requiere container-type: scroll-state y Chrome 135+. Incluya un fallback JS para compatibilidad entre navegadores.

Last updated: 2026-05-28

Limitaciones

Las consultas scroll-state requieren Chrome 135+ y aún no son compatibles con Firefox o Safari. Siempre proporcione un fallback JavaScript para uso en producción.
El contenedor debe tener container-type: scroll-state configurado para que las consultas scroll-state funcionen. Este es un container-type separado de las consultas size o inline-size.
Solo un conjunto limitado de estados de desplazamiento está disponible: snapped, stuck, scrollable y overflowing. Las animaciones complejas impulsadas por desplazamiento aún requieren JavaScript o animaciones impulsadas por desplazamiento (@scroll-timeline).

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

Cómo usar esta herramienta

Seleccione el estado de desplazamiento al que apuntar: snapped (elemento de ajuste activo), stuck (elemento sticky) o scrollable (contenedor con desbordamiento).
Establezca el selector CSS objetivo y el selector del contenedor de desplazamiento.
Elija el cambio de estilo que se aplicará cuando el estado esté activo (opacity, scale, border, background).
Copie el CSS, HTML de demostración y el fragmento de fallback JavaScript opcional.

Para qué puedes usarla

Resaltar el elemento del carrusel actualmente ajustado con opacidad completa mientras se atenúan los demás.
Agregar una sombra a un encabezado sticky solo cuando está fijo en la parte superior de la ventana gráfica.
Estilizar un panel desplazable de manera diferente cuando tiene desbordamiento frente a cuando todo el contenido cabe.

Casos de uso

Ejemplos prácticos

Ejemplo

Indicador de carrusel activo

Un carrusel muestra tarjetas de producto. Use scroll-state(snapped: true) para aplicar opacidad completa y un borde resaltado a la tarjeta actualmente ajustada mientras otras tarjetas están atenuadas. No necesita un listener de scroll JavaScript.

Ejemplo

Sombra de encabezado sticky

Una página tiene un encabezado sticky. Use scroll-state(stuck: true) en el encabezado para agregar una box-shadow cuando se vuelve fijo, indicando que el usuario se ha desplazado más allá de la parte superior de la página.

Errores comunes

Usar scroll-state() sin establecer container-type: scroll-state en el contenedor de desplazamiento — la consulta no tiene efecto.
Esperar que scroll-state() funcione en todos los navegadores — es una función de Chrome 135+. Siempre proporcione un fallback JS.
Usar consultas scroll-state en elementos que nunca alcanzan el estado objetivo — verifique que el elemento pueda realmente ajustarse o fijarse en el diseño.

Verificación

Desplace el contenedor y verifique que los elementos estilizados se actualicen correctamente — los elementos ajustados deben mostrar el estilo activo, los no ajustados el estilo predeterminado.
Pruebe con el fallback JavaScript deshabilitado para confirmar que el enfoque solo CSS funciona en Chrome 135+.

FAQ

Preguntas sobre CSS Scroll-State Query Generator

Qué estados admite scroll-state()?

Actualmente compatibles: snapped (el elemento es el objetivo de scroll-snap activo), stuck (el elemento sticky está fijo en un límite), scrollable (el contenedor tiene desbordamiento desplazable) y overflowing (el contenido desborda el contenedor). Estos estados se consultan dentro de reglas @container scroll-state(...).

En qué se diferencia scroll-state() de los eventos scroll de JavaScript?

Las consultas scroll-state se ejecutan en el hilo del compositor, no en el hilo principal de JavaScript. Son más eficientes y no causan tirones. Los eventos scroll de JavaScript se disparan en el hilo principal y pueden causar thrashing de diseño si no se aplica debounce. Para cambios de estado visual simples, las consultas scroll-state son la mejor opción.

Herramientas relacionadas