---
title: "Directional CSS with scroll-state(scrolled)"
url: https://daily.dev/posts/directional-css-with-scroll-state-scrolled--okqxocp8h
source_url: https://una.im/scroll-state-scrolled/
type: article
source: "Una Kravets"
published: 2025-12-17T21:40:40.926Z
updated: 2025-12-17T21:41:00.611Z
tags: ["webdev", "css", "google-chrome"]
reading_time: 6
upvotes: 29
comments: 2
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Directional CSS with scroll-state(scrolled)

**[Una Kravets](https://daily.dev/sources/una)** · 6 min read · 29 upvotes · 2 comments

## Summary

CSS scroll-state queries now include a `scrolled` value in Chrome 144 that detects scroll direction (up, down, left, right). By setting `container-type: scroll-state` on a parent element, you can apply styles based on the user's most recent scroll direction. Common use cases include hiding navigation bars when scrolling down and showing them when scrolling up, or creating directional scroll entry animations. The feature works as progressive enhancement, with unsupported browsers simply ignoring the scroll-state queries while maintaining existing functionality.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://una.im/scroll-state-scrolled/>

## Community discussion

Top comments from developers on daily.dev.

**@ronoales** · 2 upvotes

> Css is amazing

## Similar posts on daily.dev

- [Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.](https://daily.dev/posts/solved-by-css-scroll-state-queries-hide-a-header-when-scrolling-down-show-it-again-when-scrolling--ayjdnneua) · Bram.us · 3 upvotes · 0 comments
- [CSS @container scroll-state: Replace JS scroll listeners now](https://daily.dev/posts/css-container-scroll-state-replace-js-scroll-listeners-now-ftsviotnt) · LogRocket · 39 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#google-chrome](https://daily.dev/tags/google-chrome)

[View this post on daily.dev](https://daily.dev/posts/directional-css-with-scroll-state-scrolled--okqxocp8h)