feat: 智能滚动 - 流式回复时可向上查看历史,浮动按钮回到底部

- 流式输出时不再强制锁定底部,用户可自由滚动查看历史
- 滚动离开底部时显示「回到底部」浮动按钮(sticky 定位)
- 点击按钮平滑滚动并恢复自动跟踪
- 用户手动滚回底部时自动恢复跟踪
- 发送消息/新建会话时自动重置为跟踪状态
- 首次渲染(加载历史)强制滚到底部
This commit is contained in:
Metona
2026-04-04 21:41:26 +08:00
parent d61764a5e9
commit 12843f09a5
5 changed files with 105 additions and 4 deletions
+2 -1
View File
@@ -13,7 +13,7 @@ import { initToast, showToast } from './components/toast.js';
import { initLightbox, closeLightbox } from './components/lightbox.js';
import { initHeader, checkConnection } from './components/header.js';
import { initModelBar, loadModels, setSelectedModel } from './components/model-bar.js';
import { initChatArea, renderMessages, clearMessages } from './components/chat-area.js';
import { initChatArea, renderMessages, clearMessages, enableAutoScroll } from './components/chat-area.js';
import { initInputArea } from './components/input-area.js';
import { initSettingsModal, closeSettingsModal } from './components/settings-modal.js';
import { initHistoryModal, closeHistoryModal } from './components/history-modal.js';
@@ -50,6 +50,7 @@ async function startNewSession() {
document.querySelector('#inputArea').style.display = '';
clearMessages();
enableAutoScroll();
renderMessages();
document.querySelector('#chatInput')?.focus();
}