minimal streamplace frontend

fix window resize causing chat scroll

authored by emilia.wtf and committed by

Tangled 722bf485 1d35393e

+19 -1
+19 -1
src/components/Chat.tsx
··· 104 104 export function Chat(props: ChatProps) { 105 105 let messagesEl!: HTMLDivElement; 106 106 let ws: ChatConnection | undefined; 107 + let following = true; 107 108 108 109 const [messages, setMessages] = createSignal<ChatMessage[]>([]); 109 110 const [connected, setConnected] = createSignal(false); ··· 135 136 136 137 // auto-scroll to bottom 137 138 requestAnimationFrame(() => { 138 - if (messagesEl) { 139 + if (messagesEl && following) { 139 140 messagesEl.scrollTop = messagesEl.scrollHeight; 140 141 } 141 142 }); ··· 190 191 } 191 192 }; 192 193 194 + // keep chat pinned to bottom on new messages and resize, unless user has scrolled up 195 + const setupScrollFollowing = () => { 196 + const onScroll = () => { 197 + following = messagesEl.scrollTop + messagesEl.clientHeight >= messagesEl.scrollHeight - 5; 198 + }; 199 + messagesEl.addEventListener("scroll", onScroll, { passive: true }); 200 + const ro = new ResizeObserver(() => { 201 + if (following) messagesEl.scrollTop = messagesEl.scrollHeight; 202 + }); 203 + ro.observe(messagesEl); 204 + onCleanup(() => { 205 + messagesEl.removeEventListener("scroll", onScroll); 206 + ro.disconnect(); 207 + }); 208 + }; 209 + 193 210 onMount(() => { 194 211 connect(); 212 + setupScrollFollowing(); 195 213 }); 196 214 197 215 onCleanup(() => {