<h3 id="scroll-state-container">

Scroll State Container Features</h3>

A <dfn export>container scroll-state query</dfn> allows querying a container for

state that depends on scroll position. It is a boolean combination of

individual <dfn lt="scroll-state feature">scroll-state features</dfn>

(<<scroll-state-feature>>) that each query a single feature of the

[=query container=]. The syntax of a <dfn><<scroll-state-feature>></dfn> is the

same as for a [=media feature=]: a feature name, a comparator, and a value.

[=Scroll-state features=] can either match state of the scroller itself,

or an element that is affected by the scroll position of an ancestor

[=scroll container's=] [=scrollport=]. An example of the former is the

''scrollable'' feature, ''snapped'' the latter.

A <dfn export>container scroll-state query</dfn>

allows querying a container for state that depends on scroll position.

It is a boolean combination

of individual <dfn lt="scroll-state feature">scroll-state features</dfn>

(<<scroll-state-feature>>)

that each query a single feature of the [=query container=].

The syntax of a <dfn><<scroll-state-feature>></dfn> is the same as for a [=media feature=]:

a feature name, a comparator, and a value.

[=Scroll-state features=] can either match state of the scroller itself

(such as the ''scollable'' feature),

or an element that is affected by the scroll position

of an ancestor [=scroll container's=] [=scrollport=]

(such as the ''snapped'' feature).

<h4 id="updating-scroll-state">

Updating Scroll State</h4>

Scroll state may cause layout cycles since queried scroll state may cause style changes,

which may lead to scroll state changes as a result of layout.

To avoid such layout cycles, ''scroll-state'' [=query containers=] update their

current state as part of [=run snapshot post-layout state steps=] which is only

run at specific points in the

To avoid such layout cycles,

''scroll-state'' [=query containers=] update their current state

as part of [=run snapshot post-layout state steps=]

which is only run at specific points in the

<a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">HTML event loop processing model</a>.

When asked to [=run snapshot post-layout state steps=], update the current state

of every ''scroll-state'' [=query container=]. This snapshotted state will be used

for any style and layout updates until the next time these steps are run.

When asked to [=run snapshot post-layout state steps=],

update the current state of every ''scroll-state'' [=query container=].

This snapshotted state will be used for any style and layout updates

until the next time these steps are run.

<h4 id="stuck">

Sticky positioning: the '@container/stuck' feature</h4>

container-queries/scroll-state/scroll-state-snapped-pseudo.html

</wpt>

The '@container/snapped' [=container feature=] queries whether a [=snap target=]

is, or would be, snapped to its [=scroll snap container=], in the given axis. That is,

it matches any [=snap target=] that the {{scrollsnapchanging}} event is fired for.

The '@container/snapped' [=container feature=] queries

whether a [=snap target=] is, or would be,

snapped to its [=scroll snap container=] in the given axis.

That is, it matches any [=snap target=] that the {{scrollsnapchanging}} event is fired for.

<dl dfn-type=value dfn-for="@container/snapped">

<dt><dfn>none</dfn>

container-queries/scroll-state/scroll-state-scrollable-root.html

</wpt>

The '@container/scrollable' [=container feature=] queries whether a

[=scroll container=] has clipped [=scrollable overflow rectangle=] content

in the given direction which is reachable through user initiated scrolling.

That is, '@container/scrollable' does not match for a ''overflow/hidden''

container, nor for a [=unreachable scrollable overflow region=].

The '@container/scrollable' [=container feature=] queries

whether a [=scroll container=] has clipped [=scrollable overflow rectangle=] content in the given direction

which is reachable through user initiated scrolling.

That is, '@container/scrollable' does not match for a ''overflow/hidden'' container,

nor for a [=unreachable scrollable overflow region=].

The logical values map to physical based on the direction and writing-mode of

the [=query container=]. None of the values match if the container is not a

[=scroll container=].

The logical values map to physical

based on the direction and writing-mode of the [=query container=].

None of the values match if the container is not a [=scroll container=].

<dl dfn-type=value dfn-for="@container/scrollable">

<dt><dfn>none</dfn>

</wpt>

For a [=query container=] that is a [=scroll container=],

the '@container/scrolled' [=container feature=] queries the direction of its most recent [=relative scroll=].

The logical values map to physical based on the direction and writing-mode of the [=query container=].

the '@container/scrolled' [=container feature=] queries the direction

of its most recent [=relative scroll=].

The logical values map to physical

based on the direction and writing-mode of the [=query container=].

None of the values match if the container is not a [=scroll container=].

<dl dfn-type=value dfn-for="@container/scrolled">

<dfn export lt="container query length | container query length unit">Container query length units</dfn>

specify a length relative to the dimensions of a [=query container=].

Style sheets that use [=container query length=] units can more easily move components

from one [=query container=] to another.

Style sheets that use [=container query length=] units

can more easily move components from one [=query container=] to another.

The [=container query length=] units are: