From 2f711c66b0f1107b133f527803dd6d15f42ac830 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 12 Feb 2026 17:37:28 +0100
Subject: [PATCH] rosary: snap mystery images instantly at edges

When jumping to the top or bottom of the rosary, snap the mystery
image column instantly instead of smooth scrolling.
---
 .../[rosary=rosaryLang]/+page.svelte              | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
index 591949b..3007a9c 100644
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -182,12 +182,19 @@ $effect(() => {
 	const targetName = getMysteryScrollTarget(activeSection);
 	const targetEl = mysteryImageContainer.querySelector(`[data-target="${targetName}"]`);
 	if (targetEl) {
+		const isEdge = targetName === 'before' || targetName === 'after';
 		const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
 		// Edge pads (before/after): scroll flush so previous image hides behind the header
-		const offset = targetName === 'before' || targetName === 'after'
-			? 0
-			: rem * IMAGE_COL_HEADER_OFFSET;
-		scrollMysteryImage(Math.max(0, targetEl.offsetTop - offset));
+		const offset = isEdge ? 0 : rem * IMAGE_COL_HEADER_OFFSET;
+		const target = Math.max(0, targetEl.offsetTop - offset);
+		if (isEdge) {
+			// Snap instantly when jumping to top/bottom
+			if (mysteryScrollRaf) cancelAnimationFrame(mysteryScrollRaf);
+			mysteryScrollRaf = null;
+			mysteryImageContainer.scrollTop = target;
+		} else {
+			scrollMysteryImage(target);
+		}
 	}
 });