parks: 一覧のスクロールを表の枠内に限定

地図で公園をクリックしたとき、ブラウザごとスクロールせず表の枠内だけをスクロールする。

1 files changed, 11 insertions, 2 deletions

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<HTMLTableRowElement>("tr"));
     const total = allRows().length;
+    // 表の枠内だけでスクロールする（ブラウザごと動かさない）
+    const scrollRowIntoView = (row: HTMLElement) => {
+      const scroller = root.querySelector<HTMLElement>(".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);
         }
       }
     });