Scroll-state container queries (stuck, snapped, scrollable, scrolled)

Chrome 133 (`scrolled` en Chrome 144); Safari y Firefox todavía no (2026-09). No es Baseline.

Chrome 133Edge 133Safari noFirefox no

Estiliza un elemento según su estado de scroll: una cabecera sticky que gana sombra cuando queda pegada, una diapositiva encajada que se agranda, un contenedor con scroll que muestra pistas en los bordes solo cuando puede desplazarse. Sustituye a los centinelas con IntersectionObserver.

Sticky header

Scroll inside this box.

CSS

.fx-055-scroll {
  height: 200px;
  overflow: auto;
  border: 1px solid #ddd;
  font-family: system-ui
}
.fx-055 {
  position: sticky;
  top: 0;
  container-type: scroll-state;
  background: #fff
}
.fx-055 span {
  display: block;
  padding: 12px;
  transition: box-shadow .2s
}
@container scroll-state(stuck: top) {
  .fx-055 span {
    box-shadow: 0 4px 12px #0002
  }
}

HTML

<div class="fx-055-scroll"><header class="fx-055"><span>Sticky header</span></header><p style="height:600px">Scroll inside this box.</p></div>

Fallback: Los navegadores sin soporte ignoran la consulta; la cabecera se queda sticky sin la sombra.

Fuente: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries

Prompt

Para sombras en cabeceras sticky y estilos del elemento encajado activo, pon `container-type: scroll-state` en el elemento sticky/encajado y estiliza un hijo con `@container scroll-state(stuck: top)` / `scroll-state(snapped: x)` / `scroll-state(scrollable: bottom)`. Solo Chromium a fecha 2026-09; sin observers en JS.