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

Chrome 133 (`scrolled` no Chrome 144); Safari e Firefox ainda não (2026-09). Não é Baseline.

Chrome 133Edge 133Safari noFirefox no

Estilize um elemento com base no estado do scroll: um cabeçalho sticky que ganha sombra quando está preso, um slide encaixado que aumenta, um container de scroll que mostra dicas de borda só quando consegue rolar. Substitui sentinelas de 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: Navegadores sem suporte ignoram a query; o cabeçalho continua sticky sem a sombra.

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

Prompt

Para sombras de cabeçalho sticky e estilo de item encaixado ativo, defina `container-type: scroll-state` no elemento sticky/encaixado e estilize um filho com `@container scroll-state(stuck: top)` / `scroll-state(snapped: x)` / `scroll-state(scrollable: bottom)`. Só Chromium em 2026-09; sem observers em JS.