From a8a8d7e4e4ad376855fdbab9c8a7054438496fe4 Mon Sep 17 00:00:00 2001
From: tobenot <42083410+tobenot@users.noreply.github.com>
Date: Fri, 7 Feb 2025 23:04:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF=E8=87=AA?=
=?UTF-8?q?=E5=8A=A8=E6=BB=9A=E5=8A=A8=E9=80=BB=E8=BE=91=EF=BC=9A=E4=BB=85?=
=?UTF-8?q?=E5=BD=93=E6=8E=A5=E8=BF=91=E5=BA=95=E9=83=A8=EF=BC=88=E8=B7=9D?=
=?UTF-8?q?=E7=A6=BB=20<=2050px=EF=BC=89=E6=97=B6=E8=87=AA=E5=8A=A8?=
=?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
在更新 scrollToBottom 方法中添加了滚动位置检测，只有当消息列表距离底部小于 50px 时，才自动滚动到底部。
这样既能在用户保持在底部时自动滚动，同时在用户浏览之前的消息时不会强制滚动，改善了用户体验。
修改内容包括：
- 在 scrollToBottom 方法内部计算距离底部的距离，并使用 50px 作为阈值；
- 在 sendMessage 方法中，通过调用 scrollToBottom 方法来统一判断是否自动滚动。
测试过程中确认：
- 用户主动向上滚动查看旧消息时，不会被新的消息打断。
- 在发送新消息时，仍然能够在接近底部时自动滚动以便看到最新内容。
无其他功能上的影响。
---
index.html | 14 ++++++++------
1 file changed, 8 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index deabf4d..8d6cc2b 100644
--- a/index.html
+++ b/index.html
@@ -1301,7 +1301,12 @@ 花生 (AI进化论-花生)
this.$nextTick(() => {
const container = document.querySelector('.message-list');
if (container) {
- container.scrollTop = container.scrollHeight;
+ const threshold = 50; // 如果距离底部小于50px，则认为用户处于底部
+ const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+ // 只有当距离底部小于阈值时，才自动滚动到底部
+ if (distanceFromBottom <= threshold) {
+ container.scrollTop = container.scrollHeight;
+ }
}
});
},
@@ -1412,7 +1417,7 @@ 花生 (AI进化论-花生)
currentMessage.content += data.choices[0].delta.content || ''
}
- // 强制更新视图并滚动到底部
+ // 强制更新视图并尝试滚动到底部（仅当满足条件时）
this.currentChat.messages = [...this.currentChat.messages]
this.scrollToBottom();
} catch (error) {
@@ -1429,10 +1434,7 @@ 花生 (AI进化论-花生)
} finally {
this.isLoading = false
this.isTyping = false
- this.$nextTick(() => {
- const container = document.querySelector('.message-list')
- container.scrollTop = container.scrollHeight
- })
+ this.scrollToBottom()
}
},
renderMarkdown(content) {