MaigoLabs/amaoke.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[F] Fix scroll

Browse Source
This commit is contained in:
Azalea Gui
2025-11-19 20:40:57 +08:00
parent 15b6d64446
commit b99f60ea9f
3 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+1 -1
View File
@@ -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>
src/routes/song/[id]/+page.svelte
+28 -26
View File
@@ -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">
src/routes/song/[id]/animation.ts
+5 -3
View File
@@ -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();