带有滚动状态（scrolled）的方向性CSS

Published on December 17, 2025

发表于2025年12月17日

There’s a new scroll-state() query in town, and it’s rolling out in Chrome 144. The scrolled state query lets you apply styles based on the last scroll direction of your user’s well.. scroll. This unlocks a ton of new possibilities, and I couldn’t help but get my hands on trying it out.

有一个新的scroll-state()查询在这里推出，它将在Chrome 144中推出。scrolled状态查询允许您根据用户的最后滚动方向应用样式。这解锁了大量新可能性，我忍不住想尝试一下。

How It Works

工作原理

The scrolled value is the newest addition to scroll-state() queries: a set of container queries that respond to how a user interacts with the page scroller. Landing in Chrome 133, the other scroll-state queries include:

scrolled 值是对 scroll-state() 查询的最新补充：一组响应用户与页面滚动条交互的容器查询。该功能在 Chrome 133 中推出，其他滚动状态查询包括：

stuck: for style changes when an element is stuck to an edge (i.e. “is-sticky”).
stuck：当元素粘附在边缘时的样式变化（即“is-sticky”）。
snapped: for when an element is snapped on an axis (i.e. in a scroller, like the active item in a carousel)
snapped：当元素在轴上被固定时（即在滚动器中，如轮播中的活动项）
scrollable: for styles when an element has overflow
scrollable：当元素有溢出时的样式

To use any state query, you first set up a container-type: scroll-state on the parent element:

要使用任何状态查询，你首先需要在父元素上设置 container-type: scroll-state：

.parent {
 container-type: scroll-state;
}

Once you’ve done this, you can use scroll-state() like any other @container query.

完成此操作后，您可以像使用其他 @container 查询一样使用 scroll-state()。

.child {
 /* styles */  @container scroll-state(<type>: <value>) {
 /* scroll-based styles */
 }
}

For scrolled, you want to make sure that the parent scroller has somewhere to scroll.

对于 scrolled，你需要确保父滚动器有地方可以滚动。

html {
 container-type: scroll-state;
 overflow: auto;
}

Once the container is set up, you can query the scrolled state to detect the direction of the most recent relative scroll. The values it accepts are: top, right, bottom, left, and their logical counterparts (block-start, inline-start, block-end, inline-end) as well as the multi-directional axis-based shorthands of x, y, block, and inline. Another value this...