【Blogger】プレビューのリロード時にスクロール位置を復元する

Blogger で記事を書いたり、ブログのテーマを編集したりしているとき、変更箇所を確認するためにプレビューをリロード（再読み込み）すると、ページが一番上に戻ってしまいます。

いちいちスクロールして該当箇所まで戻るのが面倒なので、プレビューのリロード時にスクロール位置を復元する方法を考えました。

Blogger のテーマ編集の </body> の上（できれば直前）に以下のコードを追加し、テーマを保存します。

<b:if cond='data:view.isPreview'>
<script>//<![CDATA[
window.addEventListener('load', () => {
  const position = sessionStorage.getItem('scrollPosition');
  if(position) window.scrollTo(0, position);
  let isRunning = false;
  window.addEventListener('scroll', () => {
    if(isRunning) return;
    isRunning = true;
    requestAnimationFrame(() => {
      sessionStorage.setItem('scrollPosition', window.scrollY);
      isRunning = false;
    });
  });
});
//]]></script>
</b:if>

sessionStorage の setItem() でプレビュー iframe 内のスクロール位置 window.scrollY を保存し、プレビューのリロード時にページが完全に読み込まれたら getItem() で呼び出し、スクロール位置を復元します。sessionStorage に保存した内容は、タブやブラウザを開いている限り保持されます。

scroll イベントは頻繁に発生するため適度に間引いたほうがいいとのことなので、requestAnimationFrame() を用いて最適化しました。以下の2つ目のサイトに書いてある実装方法を参考にしています。

注意点は、ページ内に JavaScript などで動的に挿入される要素があると、リロード時のスクロール位置がずれる場合があることです。load イベント時にスクロール位置の復元をするようにしているものの、関連記事や最新記事あたりのフィードを用いるウィジェットは表示されるのが特に遅い気がします。

多少スクロール位置がずれたとしても、さすがにページトップからスクロールするよりは楽だと思うので、よかったらこの記事を参考にしていただけたら幸いです。