From b0676195f288f319d7ca6a9e748e7c9a20b40e1e Mon Sep 17 00:00:00 2001
From: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
Date: Tue, 8 Feb 2022 15:04:30 +0600
Subject: [PATCH] Base autoscroll telegram chat (#960)
Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
---
packages/ui/src/components/ScrollBox.svelte | 16 +++++++++++++++-
.../src/components/Chat.svelte | 2 +-
2 files changed, 16 insertions(+), 2 deletions(-)
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}