这叫啥 UI？
← 返回组件目录

COMPONENT 89 · Motion & Interaction

消息滚动容器

Message Scroller

也叫Chat ScrollerStick to Bottom聊天滚动区

跟随最新消息，同时保留向上阅读的位置。

Follow new messages while preserving the user's reading position.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 消息记录
  • 添加消息
  • 跟随状态

适合使用

  • 聊天、日志或流式对话中，需要在阅读历史与跟随更新之间切换。

不建议使用

  • 普通长列表不需要强制跟随底部；加载历史是独立的分页行为。

键盘与无障碍

  • 滚动区可聚焦且有名称，role=log 只播报新增消息。
  • 离开底部后不强行滚动，提供明确的查看新消息操作。

参考 shadcn/ui · Message Scroller ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现消息滚动容器（Message Scroller）：跟随最新消息，同时保留向上阅读的位置。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <div
        class="modern-transcript"
        role="log"
        aria-label="示例消息记录"
        aria-relevant="additions"
        tabindex="0"
      >
        <p>开始整理组件目录</p>
        <p>确认输入与选择的区别</p>
        <p>补充键盘操作说明</p>
        <p>检查可复制代码</p>
        <p>欢迎继续讨论</p>
      </div>
      <div class="modern-actions">
        <button id="add">添加消息</button><button id="latest" hidden>查看新消息 ↓</button>
      </div>
      <p id="status" role="status">正在跟随最新消息</p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>