fix:解决自动滚动遇到大的文本的时候失效的bug
This commit is contained in:
@ -737,16 +737,39 @@ export function getMessageAreaScript(): string {
|
|||||||
return toolNameMap[toolName] || toolName;
|
return toolNameMap[toolName] || toolName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 自动滚动控制标志
|
||||||
|
let shouldAutoScroll = true;
|
||||||
|
let lastScrollHeight = 0;
|
||||||
|
|
||||||
// 检查用户是否在底部附近(允许50px的误差)
|
// 检查用户是否在底部附近(允许50px的误差)
|
||||||
function isUserNearBottom() {
|
function isUserNearBottom() {
|
||||||
const threshold = 50;
|
const threshold = 50;
|
||||||
return messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < threshold;
|
return messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < threshold;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 智能滚动:只有用户在底部附近时才自动滚动
|
// 监听用户滚动行为
|
||||||
|
messagesEl.addEventListener('scroll', () => {
|
||||||
|
const isAtBottom = isUserNearBottom();
|
||||||
|
|
||||||
|
// 如果用户滚动到底部,恢复自动滚动
|
||||||
|
if (isAtBottom) {
|
||||||
|
shouldAutoScroll = true;
|
||||||
|
} else {
|
||||||
|
// 只有当内容高度没有变化时,才认为是用户主动滚动
|
||||||
|
// 如果内容高度变化了,说明是因为新内容导致的位置变化,不应该停止自动滚动
|
||||||
|
if (messagesEl.scrollHeight === lastScrollHeight) {
|
||||||
|
shouldAutoScroll = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollHeight = messagesEl.scrollHeight;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 智能滚动:只有在允许自动滚动时才滚动到底部
|
||||||
function smartScrollToBottom() {
|
function smartScrollToBottom() {
|
||||||
if (isUserNearBottom()) {
|
if (shouldAutoScroll) {
|
||||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||||
|
lastScrollHeight = messagesEl.scrollHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user