実装

.NET Framework の ListView には EnsureVisible というメソッドがあり、指定した項目が画面外にある場合はスクロールして表示することができます。

ListView.EnsureVisible(Int32) メソッド (System.Windows.Forms) | Microsoft Docs

それを真似て HTML でも ensureVisible を実装しました。マージンと HTMLElement を指定します。HTMLElement は複数指定できます。

function ensureVisible(margin, ...elems) {
  let rs = elems.map((elem) => elem.getBoundingClientRect());
  let tp = Math.min(...rs.map((r) => r.top   )) - margin;
  let bt = Math.max(...rs.map((r) => r.bottom)) + margin;
  if (tp < 0) {
    let top = pageYOffset + tp;
    scroll({ top, behavior: "smooth" });
  } else if (bt > innerHeight) {
    let top = pageYOffset + bt - innerHeight;
    scroll({ top, behavior: "smooth" });
  }
}

位置の指定

getBoundingClientRect は画面上の位置（相対座標）を取得します。スクロールすると変化します。

scroll はドキュメント上の位置（絶対座標）を指定します。そのため表示の開始位置 pageYOffset を足すことで補正します。今回の実装ではスムーズスクロールを利用しています。

    scroll({ top: top, behavior: "smooth" });

スクロール量を指定する scrollBy もありますが、スムーズスクロールをサポートしていないため利用しませんでした。

サンプル

サンプルでは 0.5 秒のウェイトを Promise で処理しています。

function wait(timeout) {
  return new Promise((resolve, reject) => setTimeout(resolve, timeout));
}

start.onclick = async () => {
  for (let td of Array.from(table.getElementsByTagName("td"))) {
    ensureVisible(20, td);
    td.classList.add("selected");
    await wait(500);
    td.classList.remove("selected");
  }
  ensureVisible(20, moveToTop);
};

詳細は以下の記事を参照してください。

非同期APIをPromiseでラップしてasync/awaitで使う

経緯

音声合成の読み上げ位置を追うために実装しました。

カミュ『地獄のプロメテウス』（短編集『夏』より） - 七誌の開発日記