coder/ai-chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AI生成时智能滚动 - 用户可自由滚动查看，只在底部时自动滚动

Browse Source
This commit is contained in:
hubian
2026-04-26 22:48:57 +08:00
parent fb09560259
commit 9098e6b4f7
2 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
www/app.js
View File

@@ -19,6 +19,7 @@ let isLoading = false;
// 功能开关 // 功能开关
let enableThinking = false; // 深度思考 let enableThinking = false; // 深度思考
let enableSearch = false; // 联网搜索 let enableSearch = false; // 联网搜索
let autoScrollEnabled = true; // 自动滚动（用户滚动后可关闭）
// DOM 元素（初始为 null，在 openConversation 时重新获取） // DOM 元素（初始为 null，在 openConversation 时重新获取）
let appContainer = null; let appContainer = null;
@@ -575,6 +576,12 @@ function openConversation(id) {
thinkingBtn = document.getElementById('thinkingBtn'); thinkingBtn = document.getElementById('thinkingBtn');
searchBtn = document.getElementById('searchBtn'); searchBtn = document.getElementById('searchBtn');
// 重置自动滚动状态
autoScrollEnabled = true;
// 设置滚动监听
setupScrollListener();
// 绑定按钮事件 // 绑定按钮事件
const backBtn = document.getElementById('backBtn'); const backBtn = document.getElementById('backBtn');
if (backBtn) backBtn.addEventListener('click', showConversationList); if (backBtn) backBtn.addEventListener('click', showConversationList);
@@ -739,6 +746,9 @@ async function sendMessage() {
currentConversation.updatedAt = Date.now(); currentConversation.updatedAt = Date.now();
saveConversations(); saveConversations();
// 发送新消息时启用自动滚动
autoScrollEnabled = true;
renderMessages(); renderMessages();
userInput.value = ''; userInput.value = '';
autoResize(userInput); autoResize(userInput);
@@ -1298,11 +1308,33 @@ function renderMarkdown(text) {
return marked.parse(text); return marked.parse(text);
} }
// 滚动到底部 // 滚动到底部（智能滚动：只在用户已在底部时自动滚动）
function scrollToBottom() { function scrollToBottom() {
if (messagesContainer) { if (messagesContainer) {
// 判断用户是否在底部附近（距离底部100px以内）
const isNearBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop - messagesContainer.clientHeight < 100;
if (isNearBottom || autoScrollEnabled) {
messagesContainer.scrollTop = messagesContainer.scrollHeight; messagesContainer.scrollTop = messagesContainer.scrollHeight;
} }
}
}
// 监听用户滚动行为
function setupScrollListener() {
if (messagesContainer) {
messagesContainer.addEventListener('scroll', () => {
// 判断用户是否在底部附近
const isNearBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop - messagesContainer.clientHeight < 100;
if (isNearBottom) {
autoScrollEnabled = true;
} else {
// 用户往上滚动，停止自动滚动
autoScrollEnabled = false;
}
});
}
} }
// 保存对话列表 // 保存对话列表

6
www/index.html
View File

@@ -8,12 +8,12 @@
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
<title>AI助手</title> <title>AI助手</title>
<link rel="stylesheet" href="style.css?v=2.7.7"> <link rel="stylesheet" href="style.css?v=2.8.0">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="marked.min.js?v=2.7.7"></script> <script src="marked.min.js?v=2.8.0"></script>
<script src="app.js?v=2.7.7"></script> <script src="app.js?v=2.8.0"></script>
</body> </body>
</html> </html>