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

Chrome 133 (`scrolled` in Chrome 144); Safari und Firefox noch nicht (2026-09). Nicht Baseline.

Chrome 133Edge 133Safari noFirefox no

Style ein Element nach seinem Scroll-Zustand: ein Sticky-Header, der einen Schatten bekommt, wenn er festhängt, eine eingerastete Folie, die hochskaliert, ein Scroll-Container, der Randhinweise nur zeigt, wenn er scrollen kann. Ersetzt IntersectionObserver-Sentinels.

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: Browser ohne Unterstützung ignorieren die Abfrage; der Header bleibt sticky ohne Schatten.

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

Prompt

Setze für Sticky-Header-Schatten und Styling des aktiven Snap-Elements `container-type: scroll-state` auf das sticky/eingerastete Element und style ein Kind mit `@container scroll-state(stuck: top)` / `scroll-state(snapped: x)` / `scroll-state(scrollable: bottom)`. Chromium-only Stand 2026-09; keine JS-Observer.