[ @sdxc/ui/mixins ]
messageFollow
Bridges a message scroller's viewport to ScrollFollowModel, reporting live scroll position, viewport size.
import { messageFollow } from "@sdxc/ui/mixins";Usage
Adds live-scroll coordination to a message scroller's viewport: reports
scroll position, size, and turn visibility into model, mirrors its
pinned and reachable-edge state back onto the viewport, and fulfills its scroll requests.
Signature
messageFollow(model: ScrollFollowModel): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
model | ScrollFollowModel | Scroll-follow state shared with the rest of the widget. |
Examples
let model = new ScrollFollowModel();
<div class="viewport" mix={messageFollow(model)}>
<div class="content">
{turns.map((turn) => (
<div key={turn.id} data-scroll-anchor={turn.id}>{turn.body}</div>
))}
</div>
<button data-scroll-jump aria-label={jumpToLatestLabel}>↓</button>
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
MESSAGE_SCROLLER_ANCHOR_ATTRIBUTE
Attribute every conversational turn exposes itself on, its value the
turn's stable id; messageFollow() reads it to find the anchor turn and
to drive its lazily attached IntersectionObserver's visibility tracking.
const MESSAGE_SCROLLER_ANCHOR_ATTRIBUTE = "data-scroll-anchor"MESSAGE_SCROLLER_JUMP_ATTRIBUTE
Attribute the viewport's jump-to-latest control carries. messageFollow()
finds it beneath the viewport to wire its click and to mirror
ScrollFollowModel.pinned onto its visibility and tab-order reachability.
const MESSAGE_SCROLLER_JUMP_ATTRIBUTE = "data-scroll-jump"MESSAGE_SCROLLER_AUTOSCROLLING_ATTRIBUTE
Attribute messageFollow() mirrors onto the viewport whenever
ScrollFollowModel.pinned is true — present while auto-follow is
engaged, absent once the reader has scrolled away from the live edge.
const MESSAGE_SCROLLER_AUTOSCROLLING_ATTRIBUTE = "data-autoscrolling"MESSAGE_SCROLLER_SCROLLABLE_ATTRIBUTE
Attribute messageFollow() mirrors onto the viewport: a space-separated
token list of edges still reachable ("start", "end", or "start end"),
readable via [data-scrollable~="end"]; removed once neither edge is reachable.
const MESSAGE_SCROLLER_SCROLLABLE_ATTRIBUTE = "data-scrollable"