From fbba5cbd1c043a107ce299a50f13e8bdfcf525a8 Mon Sep 17 00:00:00 2001 From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> Date: Fri, 6 Nov 2026 20:57:00 +0900 Subject: parks: 一覧のスクロールを表の枠内に限定 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 地図で公園をクリックしたとき、ブラウザごとスクロールせず表の枠内だけをスクロールする。 --- src/components/ParksTable.astro | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'src/components/ParksTable.astro') diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro index 1eab03d..2141eac 100644 --- a/src/components/ParksTable.astro +++ b/src/components/ParksTable.astro @@ -775,6 +775,15 @@ function isUnconfirmed(p: Park): boolean { const allRows = () => Array.from(tbody.querySelectorAll("tr")); const total = allRows().length; + // 表の枠内だけでスクロールする（ブラウザごと動かさない） + const scrollRowIntoView = (row: HTMLElement) => { + const scroller = root.querySelector(".parks-scroll"); + if (!scroller) return; + const rowRect = row.getBoundingClientRect(); + const scRect = scroller.getBoundingClientRect(); + const delta = rowRect.top - scRect.top - scRect.height / 2 + rowRect.height / 2; + scroller.scrollTo({ top: scroller.scrollTop + delta, behavior: "smooth" }); + }; let sortKey: string | null = null; let sortDir = 1; @@ -889,7 +898,7 @@ function isUnconfirmed(p: Park): boolean { }); const row = allRows().find((r) => r.dataset.name === name); if (row && !row.classList.contains("is-hidden")) { - row.scrollIntoView({ behavior: "smooth", block: "center" }); + scrollRowIntoView(row); } }); @@ -911,7 +920,7 @@ function isUnconfirmed(p: Park): boolean { row.classList.add("is-highlighted"); window.setTimeout(() => row.classList.remove("is-highlighted"), 2000); if (detail.scroll) { - row.scrollIntoView({ behavior: "smooth", block: "center" }); + scrollRowIntoView(row); } } }); -- cgit v1.3.1