Scrolled to bottom fix.

Browse Source
This commit is contained in:
retoor 2025-05-27 10:43:44 +02:00
parent cdc3d10df5
commit 538a9ce25d
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/snek/static/message-list.js
View File

@ -38,6 +38,18 @@ class MessageList extends HTMLElement {
}) })
} }
isElementVisible(element) {
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)
);
}
isScrolledToBottom() {
return this.isElementVisible(this.querySelector(".message-list-bottom"));
}
scrollToBottom(force) { scrollToBottom(force) {
console.info("Scrolling down") console.info("Scrolling down")
// if (force) { // if (force) {

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

@ -184,7 +184,7 @@ app.addEventListener("channel-message", (data) => {
} }
const lastMessage = messagesContainer.querySelector(".message:last-child"); const lastMessage = messagesContainer.querySelector(".message:last-child");
const lastElement = messagesContainer.querySelector(".message-list-bottom"); const lastElement = messagesContainer.querySelector(".message-list-bottom");
const doScrollDown = !lastMessage || isElementVisible(lastMessage); const doScrollDown = messagesContainer.isScrolledToBottom();
const message = document.createElement("div"); const message = document.createElement("div");
message.innerHTML = data.html; message.innerHTML = data.html;
message.style.display = display; message.style.display = display;
@ -251,15 +251,7 @@ function updateLayout(doScrollDown) {
} }
// --- Utility: check if element is visible --- // --- Utility: check if element is visible ---
function isElementVisible(element) {
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)
);
}
// --- Utility: check if scrolled past half --- // --- Utility: check if scrolled past half ---
function isScrolledPastHalf() { function isScrolledPastHalf() {