Scroll infinite.

Browse Source
This commit is contained in:
retoor 2025-02-17 19:03:40 +01:00
parent 3ee7c6d802
commit 95a8a45842
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/snek/templates/web.html
View File

@ -56,25 +56,40 @@
);
}
const messagesContainer = document.querySelector(".chat-messages");
function isScrolledPastHalf() {
let scrollTop = messagesContainer.scrollTop;
let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight;
if (scrollTop < scrollableHeight / 2) {
return false;
}
return true;
}
let isLoadingExtra = false;
async function loadExtra() {
const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(10)");
if(!offsetMessage){
//const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(10)");
//if(!offsetMessage){
// return
//}
const firstMessage = messagesContainer.querySelector(".message:first-child");
//if(offsetMessage.dataset.seen){
// return
//}
if(isLoadingExtra){
return
}
const firstMessage = messagesContainer.querySelector(".message:first-child");
if(offsetMessage.dataset.seen){
return
if(isScrolledPastHalf()){
isLoadingExtra = true
}
if(isElementVisible(offsetMessage)){
offsetMessage.dataset.seen = true
const messages = await app.rpc.getMessages(channelUid, 1, offsetMessage.dataset.created_at);
messages.forEach((message) => {
firstMessage.insertAdjacentHTML("beforebegin", message.html);
})
}
isLoadingExtra = false;
}
messagesContainer.addEventListener("scroll",()=>{
loadExtra()