use-stick-to-bottom

让 AI 聊天消息自动吸底,滚动顺滑不跳变

use-stick-to-bottom 是一个轻量级的 React Hook,专为 AI 聊天应用设计,用于实现消息列表平滑吸底功能。它解决了聊天过程中新消息到来时列表滚动位置不自然、用户阅读体验差的问题。核心能力包括:自动检测内容溢出并吸底、支持平滑滚动动画、可自定义滚动行为(如仅在接近底部时吸底)、提供滚动状态回调。该 Hook 基于 TypeScript 开发,类型安全,体积小,易于集成到现有 React 项目中。它不依赖第三方滚动库,而是通过原生滚动事件和 requestAnimationFrame 实现高性能滚动控制,适用于 ChatGPT、Claude 等对话式 UI 场景。

开源 free 对话助手
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 778
维护状态 低维护
是否开源 是
定价模式 free

项目数据

分类对话助手
开发团队stackblitz-labs
所属国家
定价模式free
价格说明开源MIT协议,完全免费,无付费版本。
访问状态
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai,chatbot,chatgpt,claude,messages,smooth-scrolling
GitHub 星标★ 778
30天Star增速
HF 下载量
上线时间2024-09-07 00:00:00
最近更新2026-09-22 00:00:00
维护状态低维护
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数6

使用教程

核心亮点

  • 轻量无依赖,仅 React Hook,体积小易集成
  • 平滑滚动动画,避免生硬跳变,提升体验
  • 智能吸底策略,仅在接近底部时自动跟随,不干扰用户上翻阅读

不足之处

  • 仅支持垂直滚动,不支持横向或复杂滚动容器
  • 文档/社区待观察

适用场景

  • AI 聊天机器人消息流自动滚动到底部
  • 实时日志或通知面板的自动跟随更新
  • 长列表聊天窗口(如客服系统)的滚动管理

替代项目

react-chat-elements、react-scroll-to-bottom、chat-scroll

项目介绍

use-stick-to-bottom 是开发框架领域的开源项目,由 stackblitz-labs 开发,2024 年首次发布。

它收录于开发框架分类,该分类目前共有 803 个项目,GitHub 星标数为 778。

项目已超过三个月没有代码更新,维护节奏明显放缓,最近一次代码更新于 2026-09-22。开源MIT协议,完全免费,无付费版本。

它主要面向的使用场景是:AI聊天机器人消息流自动滚动到底部。同类可对比的替代方案包括 react-chat-elements、react-scroll-to-bottom、chat-scroll。

上一篇:serverless-chat-langchainjs

下一篇:panes

同类项目推荐

langchain 开源

组装 AI 应用的乐高积木,从想法到上线不换工具

The agent engineering platform.

★ 146874 2026-08-09
transformers 开源

全球最大的模型仓库全家桶,想用的模型一把抓

Transformers: the model-definition framework for state-of-the-art machine learning m···

★ 166529 2026-08-09
pi 开源

一套 TypeScript 工具包,快速搭出能写代码的 AI agent

AI agent toolkit: unified LLM API, agent loop, TUI, coding agent CLI

★ 108504 2026-09-12