File size: 1,292 Bytes
b37570d
5da61b4
 
df5aa22
b37570d
 
 
 
da1e5da
5da61b4
df5aa22
b37570d
 
df5aa22
 
 
 
 
 
 
 
 
b37570d
 
df5aa22
 
b37570d
 
 
 
df5aa22
 
 
 
 
 
b37570d
 
 
 
f504c92
5da61b4
b2387f6
0714764
b37570d
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script lang="ts">
	import { fade } from "svelte/transition";
	import { onDestroy } from "svelte";
	import IconChevron from "./icons/IconChevron.svelte";

	export let scrollNode: HTMLElement;
	export { className as class };

	let visible = false;
	let className = "";
	let observer: ResizeObserver | null = null;

	$: if (scrollNode) {
		destroy();

		if (window.ResizeObserver) {
			observer = new ResizeObserver(() => {
				updateVisibility();
			});
			observer.observe(scrollNode);
		}
		scrollNode.addEventListener("scroll", updateVisibility);
	}

	function updateVisibility() {
		if (!scrollNode) return;
		visible =
			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
	}

	function destroy() {
		observer?.disconnect();
		scrollNode?.removeEventListener("scroll", updateVisibility);
	}

	onDestroy(destroy);
</script>

{#if visible}
	<button
		transition:fade={{ duration: 150 }}
		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
		><IconChevron classNames="mt-[2px]" /></button
	>
{/if}