CSS Scroll-State Container Queries
summary
CSS Scroll-State Container Queries introduce new CSS-only ways to detect whether a specific container is scrolling or has reached the start or end of its content. The talk explains how scroll-state queries work, gives practical examples of replacing common JavaScript patterns with these CSS features to build interactive components without scripting, and highlights possible limitations of the feature.
AI-written summary · about
chapters (8)
- 0:00CSS Scroll-State intro
- 1:46Query syntax basics
- 5:19Mobile nav scroll state
- 8:12Sticky nav stack state
- 10:17Scroll Snap snapping
- 13:50Browser support best practices
- 15:59Alternatives inspiration
- 17:05Conclusion practical use
related talks
17mContainer queries, the next step towards a truly modular CSS
49mContainers, What Do They Know?
54mCSS Containers, What Do They Know?
48mWhat Are Container Queries and Why You Need Them
38mRock’n’Scroll
45mSolving container queries today
51mCross-browser Virtual Scrolling
28mContainer Queries: The Past, Future, and How You Can Actually Even Use Them Today