diff --git a/packages/ui/src/components/ScrollBox.svelte b/packages/ui/src/components/ScrollBox.svelte index 92706c5f46..2bbe3d1597 100644 --- a/packages/ui/src/components/ScrollBox.svelte +++ b/packages/ui/src/components/ScrollBox.svelte @@ -14,13 +14,27 @@ --> <script lang="ts"> + import { afterUpdate } from "svelte" + export let vertical: boolean = false export let stretch: boolean = false export let bothScroll: boolean = false export let noShift: boolean = false + export let autoscrollable: boolean = false + + let div: HTMLElement + let autoscroll: boolean = true + + afterUpdate(async () => { + if (autoscrollable && autoscroll) div.scrollTo(0, div.scrollHeight) + }) + + function setAutoscroll () { + autoscroll = div.scrollTop > div.scrollHeight - div.clientHeight - 50 + } </script> -<div class="scroll" class:vertical class:bothScroll class:noShift> +<div class="scroll" bind:this={div} class:vertical class:bothScroll class:noShift on:scroll={setAutoscroll}> <div class="box" class:stretch> <slot/> </div> diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte index bb6c3e42f9..d45c100514 100644 --- a/plugins/telegram-resources/src/components/Chat.svelte +++ b/plugins/telegram-resources/src/components/Chat.svelte @@ -211,7 +211,7 @@ /> </div> <div class="h-full right-content"> - <ScrollBox vertical stretch> + <ScrollBox vertical stretch autoscrollable> {#if messages && accounts} <Messages messages={convertMessages(messages, accounts)} {selectable} bind:selected /> {/if}