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

Status: Chrome 133 (`scrolled` in Chrome 144); Safari and Firefox not yet (2026-09). Not Baseline.  
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries  
Page: https://designforai.dev/css/scroll-state-container-queries

Style an element based on scroll state: a sticky header that gets a shadow when stuck, a snapped slide that scales up, a scroll container that shows edge hints only when it can scroll. Replaces IntersectionObserver sentinels.

## 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: Unsupported browsers ignore the query; the header stays sticky without the shadow.

## Prompt

For sticky-header shadows and active-snap-item styling set `container-type: scroll-state` on the sticky/snapped element and style a child with `@container scroll-state(stuck: top)` / `scroll-state(snapped: x)` / `scroll-state(scrollable: bottom)`. Chromium-only as of 2026-09; no JS observers.