gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: implement autoscroll
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-05-29 04:13:02 +02:00
parent e0cc80230c
commit b164abeda9
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/MessageArea.vue
View file

@ -18,6 +18,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { MessageResponse } from '~/types/interfaces'; import type { MessageResponse } from '~/types/interfaces';
import fetchUser from '~/utils/fetchUser'; import fetchUser from '~/utils/fetchUser';
import scrollToBottom from '~/utils/scrollToBottom';
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>(); const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>();
@ -71,11 +72,16 @@ ws.addEventListener("open", (event) => {
console.log("WebSocket connected!"); console.log("WebSocket connected!");
}); });
ws.addEventListener("message", (event) => { ws.addEventListener("message", async (event) => {
console.log("event data:", event.data); console.log("event data:", event.data);
messages.value?.push( messages.value?.push(
JSON.parse(event.data) JSON.parse(event.data)
); );
await nextTick();
if (messagesElement.value) {
console.log("scrolling to bottom");
scrollToBottom(messagesElement);
}
}); });
} else { } else {
await refresh(); await refresh();
@ -100,7 +106,9 @@ function sendMessage(e: Event) {
} }
onMounted(async () => { onMounted(async () => {
messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight }); if (messagesElement.value) {
scrollToBottom(messagesElement);
}
}); });
</script> </script>