IconVault logoIconVault
Sign in

CSS scroll-state() - Interactive CSS Lab | IconVault

Learn scroll-state() container queries: sticky stuck detection and snap highlighting without JavaScript. Live badges, copyable CSS.

All tools

CSS scroll-state()

Scroll-state queries: stuck detection, snap highlight

5 of 5 free uses left
New API: support variesscroll-state() container queries shipped in Chrome 133+. The badges below are computed in JS exactly the way the spec defines them, and the same @container rules are injected for real, so they light up where the browser supports them.

Demo setup

Live query state

stuck: top: no matchstuck: bottom: no matchsnapped: block: no match

Scroll the demo. These mirror the scroll-state() features: stuck fires when a sticky element is pinned, snapped when a snap target rests on its snap point.

5 of 5 free uses left. Scrolling and badges are unlimited.

Scrollable demo (scroll inside the box)

Sticky header: watch it turn teal when stuck

Card 1

Snap target 1 of 14. Scroll slowly and watch the snapped badge.

Card 2

Snap target 2 of 14. Scroll slowly and watch the snapped badge.

Card 3

Snap target 3 of 14. Scroll slowly and watch the snapped badge.

Card 4

Snap target 4 of 14. Scroll slowly and watch the snapped badge.

Card 5

Snap target 5 of 14. Scroll slowly and watch the snapped badge.

Card 6

Snap target 6 of 14. Scroll slowly and watch the snapped badge.

Card 7

Snap target 7 of 14. Scroll slowly and watch the snapped badge.

Card 8

Snap target 8 of 14. Scroll slowly and watch the snapped badge.

Card 9

Snap target 9 of 14. Scroll slowly and watch the snapped badge.

Card 10

Snap target 10 of 14. Scroll slowly and watch the snapped badge.

Card 11

Snap target 11 of 14. Scroll slowly and watch the snapped badge.

Card 12

Snap target 12 of 14. Scroll slowly and watch the snapped badge.

Card 13

Snap target 13 of 14. Scroll slowly and watch the snapped badge.

Card 14

Snap target 14 of 14. Scroll slowly and watch the snapped badge.

Sticky footer: stuck: bottom fires when pinned here

What each feature means

  • stuck: top | right | bottom | left matches when a position: sticky child is currently stuck to that edge. Before, this needed a scroll listener.
  • snapped: block | inline | x | y matches when a scroll-snap target is resting on its snap position.
  • scrollable: top | right | bottom | left matches when the container can still scroll toward that direction.
  • The scroller needs container-type: scroll-state, then descendants query it with @container scroll-state(...).

About this tool

IconVault's CSS scroll-state() lab is a hands-on introduction to scroll-state container queries: the new CSS that answers questions like 'is my sticky header stuck?' and 'which snap target is snapped?' with pure CSS. Scroll the live demo and watch the stuck: top, stuck: bottom and snapped: block badges flip exactly the way the spec defines them, then copy the @container scroll-state() rules for your own projects.

Everything is free and runs fully in your browser. scroll-state() is new (Chrome 133+), so support varies: the tool injects the real @container rules for browsers that understand them and computes the badges in JavaScript the same way everywhere else, labelled honestly. You will finally be able to style stuck headers without a scroll listener.

Frequently asked questions

Popular searches

css scroll-statescroll-state container queriescss scroll state queries@container scroll-statecontainer-type scroll-statescroll-state stuckstuck top cssstyle sticky header when stuck csssticky header stuck state csscss detect sticky stuckscroll-state snappedsnapped block cssscroll snap highlight cssscroll-state scrollablecss scroll state browser supportscroll-state chrome 133scroll-state firefoxscroll-state safaricss container queries scrollcontainer queries new featuresscroll driven csscss without javascript scrollsticky position stuck selector:stuck cssstuck pseudo class cssintersectionobserver sticky headersticky header shadow on scroll csschange header on scroll css onlycss scroll listener alternativescroll-state tutorialscroll-state examplelearn css scroll-stateinteractive scroll-state democss scroll-state playgroundscroll-state mdnscroll-state caniusecss scroll-state 2026container query units scrollscroll state query syntax@container scroll-state(stuck: top)scroll-state(stuck: bottom)scroll-state(snapped: block)scroll snap css highlight activecss scroll snap active item stylesticky footer stuck cssposition sticky state csscss scroll container queriesnew css features 2026baseline css scroll-statecss scroll-state polyfill

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →