From b99f60ea9f928980434b4d7e0c71f4983458ac45 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 19 Nov 2025 20:40:57 +0800
Subject: [PATCH] [F] Fix scroll

---
 src/routes/+layout.svelte         |  2 +-
 src/routes/song/[id]/+page.svelte | 54 ++++++++++++++++---------------
 src/routes/song/[id]/animation.ts |  8 +++--
 3 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d283157..d303a95 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,6 +18,6 @@
   <link rel="icon" href={favicon} />
 </svelte:head>
 
-<div class="vbox min-h-screen box-border">
+<div class="vbox h-screen min-h-screen box-border overflow-hidden">
   {@render children()}
 </div>
diff --git a/src/routes/song/[id]/+page.svelte b/src/routes/song/[id]/+page.svelte
index ecaa3a8..45fe31a 100644
--- a/src/routes/song/[id]/+page.svelte
+++ b/src/routes/song/[id]/+page.svelte
@@ -166,32 +166,34 @@
 </div>
 
 <!-- Lines -->
-<div bind:this={caret} class="absolute bg-amber w-2px h-24px transition-all duration-75"></div>
-<div class="vbox gap-12px py-32px lrc-wrapper" lang="ja-JP">
-  {#each processedLrc as line, l}
-    <div class="lrc p-content text-center m3-font-body-large" class:active={l === li} role="button" tabindex="0"
-      onclick={() => hiddenInput.focus()} 
-      onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); hiddenInput.focus(); } }}>
-      {#each line.parts as seg}
-        {#if !seg.kanji}
-          {#each seg.kana as char, c}
-            <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}
-              class:punctuation={!isKana(char) && !isKanji(char)}>
-              {@html preprocessKana(char, states[l][seg.swi + c])}
-            </span>
-          {/each}
-        {:else}
-          <ruby>
-            <span class="{getKanjiState(l, seg)}">{seg.kanji}</span>{#if settings.isFuri}<rt>
-              {#each seg.kana as char, c}
-                <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}>{@html preprocessKana(char, states[l][seg.swi + c])}</span>
-              {/each}
-            </rt>{/if}
-          </ruby>
-        {/if}
-      {/each}
-    </div>
-  {/each}
+<div class="lrc-wrapper flex-1 overflow-y-auto" lang="ja-JP">
+  <div class="vbox gap-12px py-32px relative min-h-full lrc-content">
+    <div bind:this={caret} class="absolute bg-amber w-2px h-24px transition-all duration-75 z-10"></div>
+    {#each processedLrc as line, l}
+      <div class="lrc p-content text-center m3-font-body-large" class:active={l === li} role="button" tabindex="0"
+        onclick={() => hiddenInput.focus()} 
+        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); hiddenInput.focus(); } }}>
+        {#each line.parts as seg}
+          {#if !seg.kanji}
+            {#each seg.kana as char, c}
+              <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}
+                class:punctuation={!isKana(char) && !isKanji(char)}>
+                {@html preprocessKana(char, states[l][seg.swi + c])}
+              </span>
+            {/each}
+          {:else}
+            <ruby>
+              <span class="{getKanjiState(l, seg)}">{seg.kanji}</span>{#if settings.isFuri}<rt>
+                {#each seg.kana as char, c}
+                  <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}>{@html preprocessKana(char, states[l][seg.swi + c])}</span>
+                {/each}
+              </rt>{/if}
+            </ruby>
+          {/if}
+        {/each}
+      </div>
+    {/each}
+  </div>
 </div>
 
 <style lang="sass">
diff --git a/src/routes/song/[id]/animation.ts b/src/routes/song/[id]/animation.ts
index 14301d9..3d49471 100644
--- a/src/routes/song/[id]/animation.ts
+++ b/src/routes/song/[id]/animation.ts
@@ -3,11 +3,13 @@ import { tick } from "svelte";
 export function animateCaret(caret: HTMLDivElement) {
   tick().then(() => {
     const el = document.querySelector(".here") as HTMLElement;
+    const container = document.querySelector(".lrc-content") as HTMLElement;
     const update = () => {
       const rect = el?.getBoundingClientRect();
-      if (!rect) return;
-      caret.style.left = `${rect.left + window.scrollX}px`;
-      caret.style.top = `${rect.top + window.scrollY}px`;
+      const containerRect = container?.getBoundingClientRect();
+      if (!rect || !containerRect) return;
+      caret.style.left = `${rect.left - containerRect.left}px`;
+      caret.style.top = `${rect.top - containerRect.top}px`;
       caret.style.height = `${rect.height}px`;
     };
     update();