The timeline scrolls to its end on load, after layout and after assets settle, and in-app navigation into a room no longer resets it to the top.
- commit
- 57e8eb326beb7ed24daec8bf073d30bb282c57e8
- parent
- c8053d2f3cc58c68c6abe37bfbdf7fe28ea4a88a
- author
- Dami <dami.etoile@gmail.com>
| M | tinyclient/ | 6 | ++++-- |
| M | tinyclient/ | 4 | +++- |
@@ -1830,9 +1830,11 @@
18301830 if (routeChanged) {18311831 document.getElementById("nav-menu")?.removeAttribute("open");18321832 document.getElementById("context-menu")?.removeAttribute("open");1833+ // A room timeline opens at its newest message; every other route at the top.18331834 const content = document.querySelector("#content");1834- if (content) content.scrollTop = 0;1835- if (typeof window.scrollTo === "function") window.scrollTo(0, 0);1835+ const timeline = document.getElementById("messages");1836+ if (content) content.scrollTop = timeline ? content.scrollHeight : 0;1837+ if (typeof window.scrollTo === "function") window.scrollTo(0, timeline ? document.documentElement.scrollHeight : 0);18361838 content?.focus({preventScroll: true});18371839 } else {18381840 const focus = focusID && document.getElementById(focusID);@@ -754,7 +754,9 @@
754754 // reactions update their targets. It reconnects with backoff.755755 class RoomLive extends HTMLElement {756756 static get observedAttributes() { return ["room", "root"]; }757- connectedCallback() { this.open(); roomScroll(); }757+ // The timeline opens at its newest message: once now, once after layout758+ // and once more after avatars and fonts have settled the heights.759+ connectedCallback() { this.open(); roomScroll(); requestAnimationFrame(roomScroll); window.addEventListener("load", roomScroll, {once: true}); }758760 disconnectedCallback() { this.close(); }759761 attributeChangedCallback() { if (this.isConnected) { this.close(); this.open(); } }760762