History API - スクロールの復元

History API を使用すると URL を管理でき、やはり優れたウェブアプリとして非常に重要な機能です。ただし欠点の一つは、スクロール位置が保存され、さらに重要な点として、履歴を走査するたびにスクロール位置が復元されることです。これは多くの場合、スクロール位置が自動的に変化すると不自然にジャンプすることを意味します。特に、アプリが遷移した場合やページのコンテンツを変更した場合に顕著です。最終的にはユーザー エクスペリエンスの低下につながります。

さらに悪いことに、そのためにできることはほとんどありません。Chrome は scroll イベントの前に popState イベントをトリガーします。つまり、popState の現在のスクロール位置を読み取り、scroll イベント ハンドラで window.scrollTo を使用して元に戻すことができます(ただし、少なくとも問題ありません)。一方、Firefox では popState より前に scroll イベントをトリガーするため、古いスクロール値を復元する際に何が必要かわかりません。あっ!

ただし、history.scrollRestoration という方法で修正が可能です。2 つの文字列値を取ります。auto は現状(デフォルト値)です。manual は、ユーザーがアプリの履歴を走査するときに必要となるスクロール変更の責任をデベロッパーが負うことを意味します。必要に応じて、history.pushState() で履歴エントリをプッシュする際にスクロール位置をトラッキングできます。

この機能は新しい試験運用機能です(ただし、非常に素晴らしいものです)。そのため、使用する前に必ず利用可能であることを確認してください。

if ('scrollRestoration' in history) {
    // Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

history.scrollRestoration は Chrome 46 以降でリリースされます。仕様についてはこちらをご確認ください

ぜひフィードバックをお寄せください。また、他のベンダーからも scrollRestoration をサポートしてほしい場合はお知らせください。