Added scroll only when has reached bottom.

Browse Source
This commit is contained in:
retoor 2025-02-17 10:51:26 +01:00
parent f28be3ba55
commit 2e69ac5921
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,11 +45,18 @@
time.innerText = app.timeDescription(time.dataset.created_at); time.innerText = app.timeDescription(time.dataset.created_at);
}); });
} }
function isElementVisible(element) {
function updateLayout() { const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function updateLayout(doScrollDown) {
const messagesContainer = document.querySelector(".chat-messages"); const messagesContainer = document.querySelector(".chat-messages");
//messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000; //messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;
updateTimes(); updateTimes();
let previousUser = null; let previousUser = null;
document.querySelectorAll(".message").forEach((message) => { document.querySelectorAll(".message").forEach((message) => {
@ -60,8 +67,10 @@
message.classList.remove("switch-user"); message.classList.remove("switch-user");
} }
}); });
const lastMessage = messagesContainer.querySelector(".message:last-child"); lastMessage = messagesContainer.querySelector(".message:last-child");
if(doScrollDown){
lastMessage.scrollIntoView({ inline: "nearest" }); lastMessage.scrollIntoView({ inline: "nearest" });
}
} }
@ -74,6 +83,11 @@
app.playSound(0); app.playSound(0);
} }
const messagesContainer = document.querySelector(".chat-messages");
const lastMessage = messagesContainer.querySelector(".message:last-child");
const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);
const message = document.createElement("div"); const message = document.createElement("div");
message.dataset.color = data.color; message.dataset.color = data.color;
message.dataset.created_at = data.created_at; message.dataset.created_at = data.created_at;
@ -81,14 +95,14 @@
message.dataset.uid = data.uid; message.dataset.uid = data.uid;
message.innerHTML = data.html; message.innerHTML = data.html;
document.querySelector(".chat-messages").appendChild(message.firstChild); document.querySelector(".chat-messages").appendChild(message.firstChild);
updateLayout(); updateLayout(doScrollDownBecauseLastMessageIsVisible);
setTimeout(()=>{ setTimeout(()=>{
updateLayout() updateLayout(doScrollDownBecauseLastMessageIsVisible)
},1000) },1000)
}); });
initInputField(document.querySelector("textarea")); initInputField(document.querySelector("textarea"));
updateLayout(); updateLayout(true);
</script> </script>
{% endblock %} {% endblock %}