修复了页面滚动上的问题,现在可以直接一直下拉到底了,当然通过分页器分页也是可选的

This commit is contained in:
STDquantum 2023-12-22 14:19:09 +08:00
parent 1565f0ccc7
commit 3568c5d6b3

View File

@ -1080,11 +1080,16 @@ html_end = '''
const itemsPerPage = 100; // 每页显示的元素个数 const itemsPerPage = 100; // 每页显示的元素个数
let currentPage = 1; // 当前页 let currentPage = 1; // 当前页
var reachedBottom = false; // 到达底部的标记 var reachedBottom = false; // 到达底部的标记
var lastScrollTop = 0;
function renderPage(page) { function renderPage(page) {
reachedBottom = false;
const container = document.getElementById('chat-container'); const container = document.getElementById('chat-container');
container.innerHTML = ''; // 清空容器 if (!reachedBottom) {
container.innerHTML = ''; // 清空容器
lastScrollTop = 0;
} else {
reachedBottom = false;
}
// 计算当前页应该显示的元素范围 // 计算当前页应该显示的元素范围
const startIndex = (page - 1) * itemsPerPage; const startIndex = (page - 1) * itemsPerPage;
@ -1141,7 +1146,7 @@ var reachedBottom = false; // 到达底部的标记
return messageAudioTag; return messageAudioTag;
} }
// 从数据列表中取出对应范围的元素并添加到容器中 // 从数据列表中取出对应范围的元素并添加到容器中
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) { for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
const message = chatMessages[i]; const message = chatMessages[i];
if (i == startIndex) { // 判断一下在页面顶部多加一个时间 if (i == startIndex) { // 判断一下在页面顶部多加一个时间
@ -1249,7 +1254,7 @@ var reachedBottom = false; // 到达底部的标记
} }
chatContainer.appendChild(messageElement); chatContainer.appendChild(messageElement);
} }
document.querySelector("#chat-container").scrollTop = 0; document.querySelector("#chat-container").scrollTop = lastScrollTop;
updatePaginationInfo(); updatePaginationInfo();
refreshMediaListener(); refreshMediaListener();
} }
@ -1287,22 +1292,22 @@ var reachedBottom = false; // 到达底部的标记
} }
function checkScroll() { function checkScroll() {
var chatContainer = document.getElementById("chat-container"); var chatContainer = document.getElementById("chat-container");
// 检查滚动条是否滑到底部 // 检查滚动条是否滑到底部
if (chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight) { if (chatContainer.scrollHeight - chatContainer.scrollTop - 10 <= chatContainer.clientHeight) {
// 如果滚动条在底部 // 如果滚动条在底部
if (!reachedBottom) { if (!reachedBottom) {
// 设置标记并返回 // 设置标记并返回
reachedBottom = true; reachedBottom = true;
return; lastScrollTop = chatContainer.scrollTop;
} }
else{ if (reachedBottom) {
nextPage(); nextPage();
} }
}
} }
}
// 初始化页面 // 初始化页面
renderPage(currentPage); renderPage(currentPage);