forked from
juliet.paris/streamplace-spa
minimal streamplace frontend
fix window resize causing chat scroll
+19
-1
+19
-1
src/components/Chat.tsx
+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(() => {