waffle/frontend/src/components/pages/main/Messages.svelte

<script>
    import { afterUpdate, beforeUpdate } from "svelte";
    import { messagesStoreProvider } from "../../../stores.js";

    export let channelId;
    let scrollTarget;
    let shouldAutoscroll = false;

    $: messages = messagesStoreProvider.getStore(channelId);

    beforeUpdate(() => {
        shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
    });

    afterUpdate(() => {
        if (shouldAutoscroll && scrollTarget) {
            scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
        }
    });

    const onScroll = (e) => {
        const { scrollTop, offsetHeight, scrollHeight } = e.target;
        if (scrollTop === 0) {
            messages.loadOlderMessages();
        }
        if ((scrollTop + offsetHeight) >= scrollHeight) {
            messages.setIsCollectingOldMessages(true);
        } else {
            messages.setIsCollectingOldMessages(false);
        }
    };

</script>

<style>
    .messages-container {
        padding: var(--space-sm);
        height: 100%;
        width: 100%;
        flex-grow: 0;
        overflow-y: auto;
        background-color: var(--background-color-1);
    }

    .pending {
        color: var(--foreground-color-2);
    }
</style>

<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
    {#each $messages as message (message.id)}
        <div>
            <b>{ message.author_username }</b>
            <span class:pending={ message._isPending }>{ message.content }</span>
        </div>
    {/each}
</div>