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

Status: Chrome 133 (`scrolled` no Chrome 144); Safari e Firefox ainda não (2026-09). Não é Baseline.  
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries  
Página: https://designforai.dev/pt/css/scroll-state-container-queries

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.

## HTML

```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>
```

## CSS

```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
  }
}
```

Fallback: Navegadores sem suporte ignoram a query; o cabeçalho continua sticky sem a sombra.

## 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.