"Recording of the demo, recorded in Chrome Canary. There's a new type of CSS scroll-state query coming: scrolled Unlike the scrollable scroll-state queries, scrolled remembers the last direction you scrolled into, which you can use to build "hidey bars": when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself."
"Below is a live demo using the code above. You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled. If you browser does not support scrolled scroll-state queries, the header will remain fixed in place - a nice progressive enhancement if you'd ask me 🙂 The feature is expected to ship to Chrome Stable in Chrome 144."
Browsers gain a new CSS scroll-state query named 'scrolled' that records the last scroll direction. The 'scrolled' query enables UI patterns like hidey bars that slide away after scrolling down and reappear after scrolling up. Example CSS sets html { container-type: scroll-state; } and uses @container scroll-state(scrolled: bottom) to translate a fixed header up by -100%, with a transition for smooth motion. A live demo runs in Chrome Canary with the experimental Web Platform Features Flag; unsupported browsers leave the header fixed as a progressive enhancement. The feature is slated to ship to Chrome Stable in Chrome 144.
Read at Bram.us
Unable to calculate read time
Collection
[
|
...
]