085. Preserving Scroll（スクロール位置の維持：更新しても「今の場所」を絶対に見失わない）

原理：ユーザーの「視座」を固定する

画面が変わっても、景色は変えない

HTMXで長いページの中ほどにある「いいね」ボタンを押したとします。画面が新しくなった瞬間、ブラウザが勝手にページの一番上までピュンと戻ってしまったらどうでしょう？「今どこまで読んでいたか」がわからなくなり、また下までスクロールして自分のいた場所を探す羽目になります。これはユーザーを非常に疲れさせる「悪い挙動」の代表格です。

「スクロール位置の維持（Preserving Scroll）」とは、「HTMLの中身は新しく書き換えるけれど、ブラウザが見ている場所（スクロールの縦・横の位置）は今のままピタッと止めておく」ための技術です。

HTMXはデフォルトでこの「維持」を賢く行おうとしますが、時には私たちの手で明示的に指示してあげる必要があります。

実践：長大なリストを快適に操作する

1. リストの特定行を更新したときの挙動

多数の商品が並んでいるページで、一つだけ情報を更新する例です。

<!-- 
  hx-target: 自分の行 (#item-45) を更新
  hx-swap: 
    デフォルトでも維持されますが、
    もし意図しないスクロールが起きる場合は
    scroll:none や show:none などのテクニック(074.解説)を併用します。
-->
<tr id="item-45">
    <td>すごい掃除機</td>
    <td>
        <button hx-post="/api/item/45/toggle" hx-target="#item-45">
            お気に入り
        </button>
    </td>
</tr>

2. 「overflow」したコンテナ内の維持

ページ全体ではなく、横スクロールする画像ギャラリーや、縦スクロールするチャットログなどの「特定の箱（コンテナ）」の中での位置を守りたい場合、HTMXは更新後もその箱の scrollTop や scrollLeft という数字を大切に復元しようと努力します。

比較：全画面リダイレクト vs HTMXの部分更新

全画面リダイレクト (通常のWeb)

挙動: サーバーから新しいページが全部届く。
結果: 原則、ページの一番上（0,0）から表示が始まる。位置を覚えさせておくには非常に複雑なプログラムが必要。

HTMXの部分更新

挙動: 指定した場所だけをこっそり入れ替える。
結果: ブラウザはページを「読み直した」と思っていないため、スクロール位置は自然にそのまま維持されます。これがHTMXがSPAのように快適に感じる最大の理由の一つです。

まとめ：初心者のための「静止」のデザイン

スクロール位置が維持されることは、モダンなWebアプリにとって「あって当たり前、ないと地獄」という非常に重要な品質基準です。

ユーザーの「現在地」を尊重する: スクロール位置は、ユーザーがそのページに費やした時間と関心の記録です。それを断りなくリセットしないことが、Web開発者の「誠実さ」です。
HTMXの標準を信じる: ほとんどの場合、HTMXはあなたが何もしなくても位置を守ってくれます。もし「変な動きをしたな？」と思ったら、それは hx-target の範囲が広すぎたり、HTMLの構造が大きく変わりすぎたりしていないかを確認しましょう。
「hx-preserve」（次回予告）との合わせ技: スクロールする要素そのものを「更新から除外」して物理的に動かさないようにする、さらに強力な技もあります。

世界は変わる。でも、視線は変わらない。Partical Update（部分更新） の持つこの「静かさ」を最大限に活かして、ユーザーがストレスなく、どこまでも深くコンテンツに没入できるWebページを作り上げてください。次の記事では、更新の嵐から特定の要素を完全に守り抜く「hx-preserve」（086. hx-preserve）をご紹介します。