chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

SPAでhistory backでのスクロール位置

SPAを実装したことのある人なら誰もが一度はつまづく画面遷移時のスクロールポジション。

自分も「このタイミングでこの位置にいてほしいのに。。。」と思う事が多々ありました。

特にブラウザバック時にいたスクロールポジションを保持している時の対応。

ポジション移動のタイミングが早くて、見た目が変になるという案件にぶつかりました。

いっその事全部自分で管理できたら嬉しいのですが。。。

そこで役に立ちそうなのが scrollRestoration

Historyインターフェースに追加されました。

history.scrollRestoration = auto

これがデフォルトの設定です。

history.scrollRestoration = manual

としてあげると、スクロールポジションの復元がされなくなります。

ただ、まだ新しい技術なので対応していないブラウザがまだまだあります。

developer.mozilla.org

使いどころには注意しましょう。