_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Autoscroll

Browse Source
This commit is contained in:
GRL 2021-07-12 15:00:28 +02:00
parent b9a2433283
commit e2e94c11ff
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/Components/Chat/Chat.svelte
View File

@ -1,21 +1,20 @@
<script lang="ts"> <script lang="ts">
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import {chatMessagesStore, chatVisibilityStore} from "../../Stores/ChatStore"; import { chatMessagesStore, chatVisibilityStore } from "../../Stores/ChatStore";
import ChatMessageForm from './ChatMessageForm.svelte'; import ChatMessageForm from './ChatMessageForm.svelte';
import ChatElement from './ChatElement.svelte'; import ChatElement from './ChatElement.svelte';
import {onMount} from "svelte"; import { afterUpdate, beforeUpdate } from "svelte";
let listDom: HTMLElement; let listDom: HTMLElement;
let autoscroll: boolean;
onMount(() => { beforeUpdate(() => {
listDom.addEventListener('onscroll', function(e: Event) { autoscroll = listDom && (listDom.offsetHeight + listDom.scrollTop) > (listDom.scrollHeight - 20);
console.log(e); });
// Active list item is top-most fully-visible item
//const visibleListItems = Array.from(document.getElementsByClassName('list-item')).map(inView.is); afterUpdate(() => {
// Array.indexOf() will give us the first one in list, so the current active item if (autoscroll) listDom.scrollTo(0, listDom.scrollHeight);
//const topMostVisible = visibleListItems.indexOf(true);
}); });
})
function closeChat() { function closeChat() {
chatVisibilityStore.set(false); chatVisibilityStore.set(false);
@ -35,8 +34,8 @@
<h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3> <h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3>
</section> </section>
<section class="messagesList"> <section class="messagesList" bind:this={listDom}>
<ul bind:this={listDom}> <ul>
{#each $chatMessagesStore as message} {#each $chatMessagesStore as message}
<li><ChatElement message={message}></ChatElement></li> <li><ChatElement message={message}></ChatElement></li>
{/each} {/each}