JavaScriptのスクロール補正で画面がチラつく原因とCSSへの変更

固定ヘッダーでページ内リンクの見出しが隠れないようJavaScriptで位置補正していたが、ブラウザの「戻る」で画面がチラつく現象が発生。

原因を確認し、CSSによる位置補正へ変更した経緯と、JavaScriptとCSSの使い分けについて振り返る。

サイトの表示が一瞬チラつく現象

ブログを調整している中で、スマホから特定の記事へ戻った際に、画面が一瞬チラつく現象を確認した。

最初はタグ機能を追加したタイミングで気付いたため、新しく実装された機能が影響している可能性も考えていた。

しかし調べていくと、原因は以前から自分で設置していたJavaScriptにあった。

固定ヘッダーとページ内リンクの問題

ライフログメモでは固定ヘッダーを使用している。

この状態でURLの末尾に「#○○」が付いたページ内リンクへ移動すると、ブラウザが対象位置までスクロールしても、見出しなどが固定ヘッダーの裏側に隠れてしまう場合がある。

URLにハッシュが付いている場合、その対象となる位置を取得し、固定ヘッダーの高さを考慮した場所まで改めてスクロールさせるという考え方である。

実際、この仕組みによって見出しが固定ヘッダーに重なる問題は解消できていた。

JavaScriptによる補正でチラつきが発生

問題になったのは、別ページへ移動した後にブラウザの「戻る」を使用した場合だった。

ところが、URLにハッシュが付いていると、自分で設置していたJavaScriptもスクロール位置を補正する。

結果として、

⬇

⬇

という動きが短時間に発生していた。

これによって、画面が一瞬動いたように見える「チラつき」が発生していたようだ。

JavaScriptを削除してCSSで対応

今回、JavaScriptによる位置補正をやめ、CSSによる方法へ変更した。

CSSには、ページ内リンクで対象要素へ移動するときに、上側へ一定の余白を確保する仕組みがある。

これを利用すれば、JavaScriptからスクロール位置を計算して動かさなくても、固定ヘッダーに見出しが隠れないようにできる。

実際にブログページとフリーページそれぞれで余白を調整し、PCとスマートフォンから確認した。

その結果、ブラウザの「戻る」で発生していたチラつきも改善された。

JavaScriptとCSSはどちらを使うべきなのか

今回感じたのは、「JavaScriptで実現できるからJavaScriptを使う」ことが必ずしも最適ではないということだ。

JavaScriptは自由度が高い。

画面の状態を取得したり、固定ヘッダーの実際の高さを計測したり、条件によって処理を変えたりできる。

今回も、JavaScriptによるスクロール位置の補正自体は正常に動いていた。

しかし、ブラウザが持つ「戻る時のスクロール位置復元」と組み合わさったことで、チラつきという別の問題につながった。

対してCSSは、対応できる内容こそJavaScriptより限定されるものの、今回のような見た目や配置の調整であれば、より単純な仕組みで実現できる。

ブラウザ標準の動作に任せられるため、余計な処理も少ない。

単純な表示調整ならCSSを優先したい

今回の目的は、「ページ内リンクへ移動した際に、固定ヘッダーで見出しが隠れないようにする」というものだった。

もちろん、動的な計算や複雑な条件分岐が必要ならJavaScriptを使う意味はある。

ただし、

「CSSだけで実現できるのか」

「JavaScriptを使う必要が本当にあるのか」

は一度考えた方がよいことに気づいた。

今回のようにCSSで十分実現できる処理であれば、シンプルな方法を選んだ方が、後から予期しない挙動に悩まされる可能性も減らせる。

その時点では固定ヘッダーに見出しが隠れる問題を解決するために機能していた。

ただ、サイトの構成や使い方が変わる中で、以前の実装が別の問題を生むこともある。

今回の件は、既存の処理をそのまま使い続けるのではなく、より単純な方法へ置き換えられないか見直す良い機会になった。