v147 ยท Chapter Navigator

Chapter Navigator

A sticky sidebar and a full-scroll progress meter driven by a named view timeline. The blue meter uses animation-timeline: --chapter-scroll with animation-range: scroll 0% scroll 100%; the active chapter buttons use a JavaScript fallback so unsupported browsers still have usable navigation.

Chrome 147+. The progress meter is attached to the article's named view timeline and uses the new scroll named range. Active chapter state is mirrored in JavaScript for fallback and screen-reader state. Detecting support

Chapter 1

Introduction

Scroll this article to move through the chapters. The sidebar's blue progress meter is CSS-only and attached to a named view timeline registered on the article content.

The JavaScript layer only handles navigation controls, active labels, and fallback readouts; it does not drive the blue meter in supporting browsers.

view-timeline: not measured yet

Chapter 2

Background

Visibility ranges such as cover and contain describe where a subject is in the scrollport. They are useful for reveal animations, but not ideal for full-document progress.

view-timeline: not measured yet

Chapter 3

Approach

The article content declares view-timeline-name: --chapter-scroll. The sidebar can target that timeline because the shared layout declares timeline-scope: --chapter-scroll.

view-timeline: not measured yet

Chapter 4

Results

The scroll named range maps the animation attachment range to the startmost and endmost scroll positions of the underlying scroller.

view-timeline: not measured yet

Chapter 5

Conclusion

When a ViewTimeline subject has no principal box, the timeline is inactive. The inactive-timeline check exposes that failure branch directly.

view-timeline: not measured yet

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference โ†—