History.scrollRestoration - スクロール位置の復元

2017/10/05

scrollRestorationは、Historyのプロパティです。「戻る」や「進む」などでブラウザの履歴エントリー間の移動があった時、スクロール位置を復元するか否かを指定できます。

概要

名前

scrollRestoration

所属

IDL

attribute ScrollRestoration scrollRestoration;

enum ScrollRestoration { "auto", "manual" };

仕様書

https://html.spec.whatwg.org/multipage/history.html#dom-history-scroll-restoration

説明

下記のキーワードを文字列で指定する。

auto: 初期値。スクロール位置を復元する。
manual: スクロール位置を復元しない。

プロパティの値は、履歴エントリーごとに保持されます。例えばAからBへ移動する時、Bが保持しているプロパティの値が優先され、挙動に反映されます。

デモ

History.scrollRestorationのデモです。1.html、2.htmlという2つの同じページを用意しました。2つのページ間をまずはリンクで移動して、そこから「戻る」「進む」を実行してみて下さい。scrollRestorationの値を"manual"にすると、「戻る」、または「進む」でそのページに戻ってきた時、スクロールの位置がリセットされているのを確認しましょう。

<p>scrollRestoration: <label><input type="radio" id="auto">auto</label> / <label><input type="radio" id="manual">manual</label></p>
<script>
document.getElementById( "auto" ).onclick = function () {
	history.scrollRestoration = "auto" ;
}

document.getElementById( "manual" ).onclick = function () {
	history.scrollRestoration = "manual" ;
}
</script>

サポート状況

Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
● 46+	● 46+	● 11.0+	×	×	● 33+	● 11.0+	×

概要

説明

デモ

サポート状況

関連記事