[解決済み] HTML5 の履歴ポップステートでブラウザのスクロールを防止する

質問

popstate イベントが発生したときに、ドキュメントをスクロールするデフォルトの動作を防ぐことは可能ですか?

私たちのサイトでは jQuery アニメーション スクロールと History.js を使用しており、状態の変更により、pushstate または popstate を介してページの異なる領域へユーザーがスクロールするはずです。問題は、popstate イベントが発生すると、ブラウザが前の状態のスクロール位置を自動的に復元することです。

私は、ドキュメントの幅と高さが 100% に設定されたコンテナー要素を使用して、そのコンテナー内のコンテンツをスクロールしてみました。私が発見したその問題は、ドキュメントをスクロールするのと同じくらいスムーズではないようです。

私はまた、ユーザーが開始したスクロール中にドキュメントのスクロール位置を保存し、ブラウザが (popstate で) ページをスクロールした後にそれを復元することを試みました。これは、Firefox 12 では正常に機能しますが、Chrome 19 では、ページがスクロールされて復元されるためにちらつきが発生します。これは、スクロールとスクロール イベントが発生する (スクロール位置が復元される) 間に遅延があるためだと推測しています。

Firefox は popstate が発生する前にページをスクロールし (そして scroll イベントを発生させ)、Chrome は popstate を最初に発生させてからドキュメントをスクロールさせます。

私が見た履歴 API を使用するすべてのサイトは、上記のソリューションと同様のものを使用するか、ユーザーが戻る/進むときにスクロール位置の変更を無視するだけです (例: GitHub)。

popstate イベントでドキュメントがまったくスクロールされないようにすることは可能ですか?

どのように解決するのですか?

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

( Googleから発表された を2015年9月2日に発表)

ブラウザに対応しました。

Chrome: サポートされています (46以降)

Firefox: サポートされています (46 以降)

IE: サポートされていません。

Edge: サポートあり (79年以降)

Opera: サポートされています (33 以降)

サファリ: サポートあり

詳細については MDN でのブラウザの互換性 .