项目预览
项目数据
项目介绍
Star 增长趋势
本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整
数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 784
使用教程
环境要求
- React 18+
- Node.js 18+
安装与启动步骤
-
1装包
聊天列表自动贴底、且不打乱用户滚动位置的 hook。
npm install use-stick-to-bottom -
2接进列表
把滚动容器换成它的组件。
import { StickToBottom } from 'use-stick-to-bottom'; -
3包住内容
内容区放 StickToBottom.Content。
<StickToBottom><StickToBottom.Content>...</StickToBottom.Content></StickToBottom> -
4处理新消息
流式追加时保持视口稳定。
在 content 末尾追加消息即可
如何确认成功
流式输出时视口不跳动，用户上滑后不再自动贴底。
注意事项
- 零依赖、体积小，聊天类界面基本都要这个能力。
- 自己用 scrollTop 实现很难处理「用户正在上滑」的判断。
- 配 virtualization 时要额外注意高度测量。
核心亮点
- 轻量无依赖，仅 React Hook，体积小易集成
- 平滑滚动动画，避免生硬跳变，提升体验
- 智能吸底策略，仅在接近底部时自动跟随，不干扰用户上翻阅读
不足之处
- 仅支持垂直滚动，不支持横向或复杂滚动容器
- 文档/社区待观察
适用场景
- AI 聊天机器人消息流自动滚动到底部
- 实时日志或通知面板的自动跟随更新
- 长列表聊天窗口（如客服系统）的滚动管理
替代项目
react-chat-elements、react-scroll-to-bottom、chat-scroll
上一篇：serverless-chat-langchainjs
下一篇：panes
同类项目推荐
anthropic-sdk-python
开源
官方 Python 库，几行代码接入 Claude 模型
swift-ios-skills
开源
让 AI 写出更地道的 SwiftUI 代码，适配 iOS 26 新特性。
Agent Skills for iOS 26+, Swift 6.3, SwiftUI, and modern Apple frameworks
ComfyUI-Gemini
开源
在 ComfyUI 里直接调用 Gemini，让多模态 AI 助力图像创作。
Using Gemini in ComfyUI
torchdistill
开源
免写代码，配置即复现顶会知识蒸馏实验
A coding-free framework built on PyTorch for reproducible deep learning studies. PyT···
Hephaestus
开源
让AI代理自己搭建工作流，告别预设流程，动态完成任务。
Semi-Structured Agentic Framework. Workflows build themselves as agents discover wha···
FastQL
开源
一行 Python 代码，快速启动 Rust 驱动的 GraphQL API
Spin up a super fast Rust powered GraphQL API to prototype your ML model in one line···
beyondllm
开源
快速构建、评估和观测你的 LLM 应用
Build, evaluate and observe LLM apps
dspy-advanced-prompting
开源
用DSpy实现高级提示词技巧，提升LLM应用效果
State-of-the-art prompting techniques implementation with DSpy - Manager-style promp···
agent-skills
开源
给 AI 编程代理装技能，先审后用更放心
The secure, validated skill registry for professional AI coding agents. Extend Antig···