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 のサポートをご希望の場合はお知らせください。