Skip to content

优化消息自动滚动逻辑：仅当接近底部（距离 < 50px）时自动滚动 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tobenot wants to merge 1 commit into
base: main
Choose a base branch
from
Open

优化消息自动滚动逻辑：仅当接近底部（距离 < 50px）时自动滚动 #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1301,7 +1301,12 @@ <h3>花生 (AI进化论-花生)</h3>
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;
}
}
});
},
Expand Down Expand Up @@ -1412,7 +1417,7 @@ <h3>花生 (AI进化论-花生)</h3>
currentMessage.content += data.choices[0].delta.content || ''
}

// 强制更新视图并滚动到底部
// 强制更新视图并尝试滚动到底部（仅当满足条件时）
this.currentChat.messages = [...this.currentChat.messages]
this.scrollToBottom();
} catch (error) {
Expand All @@ -1429,10 +1434,7 @@ <h3>花生 (AI进化论-花生)</h3>
} finally {
this.isLoading = false
this.isTyping = false
this.$nextTick(() => {
const container = document.querySelector('.message-list')
container.scrollTop = container.scrollHeight
})
this.scrollToBottom()
}
},
renderMarkdown(content) {
Expand Down