组件 · 数据展示

MessageScroller 消息滚动区

消息流滚动容器：Provider/Viewport/Content/Item/Button。

入口 @selrux/ui/message-scroller · 源码 src/components/message-scroller/index.ts · 6 个组件 · 发布状态 preview

使用建议

避免：无虚拟化时塞入超大历史消息
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456789import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
  // …共 9 个导出
} from '@selrux/ui/message-scroller';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

用户：第 1 条消息

助手：第 2 条消息

用户：第 3 条消息

助手：第 4 条消息

用户：第 5 条消息

助手：第 6 条消息

用户：第 7 条消息

助手：第 8 条消息

用户：第 9 条消息

助手：第 10 条消息

代码演示

基础用法

对话类消息流，默认停在末尾；离开底部时出现回到底部按钮。

用户：第 1 条消息

助手：第 2 条消息

用户：第 3 条消息

助手：第 4 条消息

用户：第 5 条消息

助手：第 6 条消息

用户：第 7 条消息

助手：第 8 条消息

用户：第 9 条消息

助手：第 10 条消息

用户：第 11 条消息

助手：第 12 条消息

滚动行为

Provider 的 autoScroll 新消息自动跟随、scrollEdgeThreshold 判定“到底”的阈值、scrollPreviousItemPeek / scrollMargin 定位留白；Viewport 的 preserveScrollOnPrepend 加载历史时保持位置；Item 的 scrollAnchor 作为锚点；Button 的 behavior 滚动动画；Content 的 spacerClassName。

工单 #1000 状态更新

工单 #1001 状态更新

工单 #1002 状态更新

工单 #1003 状态更新

工单 #1004 状态更新

工单 #1005 状态更新

工单 #1006 状态更新

工单 #1007 状态更新

API

属性覆盖：示例用到 10 / 10 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

MessageScroller

主题化消息滚动根。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

MessageScrollerButton

主题化滚动按钮。

属性	说明	类型	默认值
`direction`	-	`"start" \| "end"`	-
`behavior`	-	`"auto" \| "instant" \| "smooth"`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

MessageScrollerContent

主题化内容列。

属性	说明	类型	默认值
`spacerClassName`	-	`string`	-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

MessageScrollerItem

主题化消息行。

属性	说明	类型	默认值
`messageId`	-	`string`	-
`scrollAnchor`	-	`boolean`	-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

MessageScrollerProvider

无样式 Provider 透传（行为在 headless）。

属性	说明	类型	默认值
`autoScroll`	-	`boolean`	-
`defaultScrollPosition`	-	`"start" \| "end" \| "last-anchor"`	-
`scrollEdgeThreshold`	-	`number`	-
`scrollPreviousItemPeek`	-	`number`	-
`scrollMargin`	-	`number`	-
`children`	-	`React.ReactNode`	-

MessageScrollerViewport

主题化视口。

属性	说明	类型	默认值
`preserveScrollOnPrepend`	-	`boolean`	-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：MessageScrollerButtonProps、MessageScrollerContentProps、MessageScrollerItemProps、MessageScrollerProps、MessageScrollerProviderProps、MessageScrollerViewportProps

函数与常量

名称	说明	签名 / 类型
`useMessageScroller`	-	`() => { scrollToEnd: (options?: MessageScrollerScrollOptions) => boolean; scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean; scrollToStart: (options?: MessageScrollerScrollOptions) => boolean; }`
`useMessageScrollerScrollable`	-	`() => MessageScrollerScrollable`
`useMessageScrollerVisibility`	-	`() => MessageScrollerVisibilityState`