demo · v133

Scrolled progress — `scrolled` query

The second state — scrolled — matches when the scroll position is away from the top. Pop in a “back to top” affordance and add a heavier sticky-header shadow only once reading has actually started.

scroll inside the pane below

The Reader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

the rule

.read-pane { container-type: scroll-state; }
.back-to-top { opacity: 0; pointer-events: none; }
@container scroll-state(scrolled: y) {
  .back-to-top { opacity: 1; pointer-events: auto; }
  h3 { box-shadow: 0 4px 0 black; }
}

This pattern was previously a scroll listener feeding a class on the container. scrolled: y is the declarative equivalent and matches the same instant the browser knows about, with no JS frame cost.

The Reader

the rule

see also