Web features explorer

Container scroll-state queries

Limited availability

Container scroll-state queries with the @container scroll-state(...) at-rule apply styles to an element based on the sticky positioning, snapped, and scrollable state of the container.

Browser support

  • Chrome 133 Released on 2025-02-04
  • Chrome Android 133 Released on 2025-02-04
  • Edge 133 Released on 2025-02-06
  • Firefox Not supported Bugs: 1931980
  • Firefox for Android Not supported Bugs: 1931980
  • Safari Not supported
  • Safari on iOS Not supported
👍
63

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

Specifications

Usage (according to Chrome Platform Status)

~0.363% of page loads. More data at chromestatus.com.

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Surveys

Developer use cases

  • Being able to adjust nav via this feature would avoid needing to use js to detect particular container scroll states. Being able to adjust nav via this feature would avoid needing to use js to detect particular container scroll states. [see original comment]
  • Show fade indicator when a list of tabs in the [WordPress Tabs component](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-tabs--docs#size-and-overflow-playground) does not fit within the container: <img width="660" height="147" alt="Image" src="https://github.com/user-attachments/assets/bc21465f-a163-4bf4-8f1e-907304087d15" /> Show fade indicator when a list of tabs in the [WordPress Tabs component](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-tabs--docs#size-and-overflow-playground) does not fit within the container: <img width="660" height="147" alt="Image" src="https://github.com/user-attachments/assets/bc21465f-a163-4bf4-8f1e-907304087d15" /> [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist