feat: scroll position after navigation (#107)

fix: scroll position after navigation
immich-app · Feb 6, 2025 · 9cc409f · 9cc409f
1 parent 0497aee
commit 9cc409f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/src/docs/components/ComponentPage.svelte b/src/docs/components/ComponentPage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Container, Heading, Scrollable, type ContainerSize } from '@immich/ui';
+	import { Container, Heading, type ContainerSize } from '@immich/ui';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -23,10 +23,8 @@
 		</div>
 	</nav>
 
-	<Scrollable>
-		<Container {size} class="flex flex-col p-4">
-			<Heading size="large">{name}</Heading>
-			{@render children?.()}
-		</Container>
-	</Scrollable>
+	<Container {size} class="flex flex-col p-4">
+		<Heading size="large">{name}</Heading>
+		{@render children?.()}
+	</Container>
 </div>
diff --git a/src/lib/components/AppShell/AppShell.svelte b/src/lib/components/AppShell/AppShell.svelte
@@ -27,7 +27,7 @@
 		{#if sidebar}
 			{@render sidebar?.snippet()}
 		{/if}
-		<Scrollable class="grow">
+		<Scrollable class="grow" resetOnNavigate>
 			{@render children?.()}
 		</Scrollable>
 	</div>

diff --git a/src/lib/components/Scrollable/Scrollable.svelte b/src/lib/components/Scrollable/Scrollable.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
 	import { cleanClass } from '$lib/utils.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
 		class?: string;
 		children?: Snippet;
 		transition?: TransitionEvent;
+		ref?: HTMLDivElement;
+		resetOnNavigate?: boolean;
 	};
 
-	const { class: className, children }: Props = $props();
+	let { resetOnNavigate = false, class: className, children, ref = $bindable() }: Props = $props();
+
+	afterNavigate(() => {
+		if (resetOnNavigate) {
+			ref?.scrollTo(0, 0);
+		}
+	});
 </script>
 
-<div class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
+<div bind:this={ref} class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
 	{@render children?.()}
 </div>