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"); 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() { async function loadExtra() {
const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(10)"); //const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(10)");
if(!offsetMessage){ //if(!offsetMessage){
// return
//}
const firstMessage = messagesContainer.querySelector(".message:first-child");
//if(offsetMessage.dataset.seen){
// return
//}
if(isLoadingExtra){
return return
} }
const firstMessage = messagesContainer.querySelector(".message:first-child"); if(isScrolledPastHalf()){
if(offsetMessage.dataset.seen){ isLoadingExtra = true
return
} }
if(isElementVisible(offsetMessage)){
offsetMessage.dataset.seen = true
const messages = await app.rpc.getMessages(channelUid, 1, offsetMessage.dataset.created_at); const messages = await app.rpc.getMessages(channelUid, 1, offsetMessage.dataset.created_at);
messages.forEach((message) => { messages.forEach((message) => {
firstMessage.insertAdjacentHTML("beforebegin", message.html); firstMessage.insertAdjacentHTML("beforebegin", message.html);
}) isLoadingExtra = false;
}
} }
messagesContainer.addEventListener("scroll",()=>{ messagesContainer.addEventListener("scroll",()=>{
loadExtra() loadExtra()