v147 · CSS · Scroll
Compatibility Lab
Checks the new scroll named range on a real named view timeline. The blue bar is CSS-only via view-timeline-name, timeline-scope, and animation-range: scroll 0% scroll 100%; the green bar is a JavaScript measurement of the same scroller.
exact feature probes
live comparison: named view timeline vs JS
Scroll the box below. The CSS bar should reach 100% at the same endmost scroll position as the JavaScript bar when this browser implements the scroll named range for view timelines.
CSS: view timeline scroll range
CSS animation current time: pending
JS: scrollTop fallback
JS scroll progress: 0%
Scroll this area to move the named view timeline.
The subject element registers
view-timeline-name: --lab-subject.The CSS progress bar is outside the scroller but can see that named timeline through
timeline-scope.The attachment range is the new
scroll named range, so it is based on the scroller's full range.The JavaScript bar reads
scrollTop / (scrollHeight - clientHeight) for comparison.At the bottom, both bars should report the endmost scroll position.
Move the scroller or choose a sample position.
fallback pattern
/* Exact CSS contract: a named view timeline with the scroll range */
.stage {
timeline-scope: --article;
}
.article {
view-timeline-name: --article;
view-timeline-axis: block;
}
.progress {
animation: progress-fill linear both;
animation-timeline: --article;
animation-range: scroll 0% scroll 100%;
}
/* Failure branch: if the subject has no principal box, the ViewTimeline is inactive. */
if (timeline.currentTime === null) {
useScrollTopFallback();
}
references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗