ページ遷移直後のスクロールのちらつきを無くしたい

この記事はソニックガーデン 若手プログラマ Advent Calendar 2024 10日目の記事です。

はじめに

webアプリケーションにおいて、チャット画面等でページ遷移直後に最下部へJavaScriptでスクロールさせるという事はよくあると思います。
その際に、ページ遷移直後からスクロール完了までのごく僅かな瞬間にスクロール前の要素がちらつくことがあります。
そのちらつきを無くす方法をご紹介します。

結論

CSSのスタイルがvisibility: hiddenの状態で画面を表示するようにし、スクロール後にそのスタイルを取り除くことでちらつきを防ぐことができます。

visibilityとは

要素を表示したり非表示にしたりするためのプロパティです。
displayとは異なり、画面のレイアウトを保持したまま表示を制御することができます。

display: noneの場合

See the Pen Untitled by yatsuhashi (@yatsuhashi168) on CodePen.

visibility: hiddenの場合

See the Pen Untitled by yatsuhashi (@yatsuhashi168) on CodePen.

コード例

html

<div id="scroll-target" class="visibility-hidden">
 <div class="item">item</div>
 <div class="item">item</div>
 <div class="item">item</div>
 <div class="item">item</div>
 <div class="item">item</div>
 <!-- 〜以下itemが続く〜 -->
</div>

css

#scroll-target {
  height: 300px;
  overflow-y: scroll;
}

.item {
  height: 100px;
}

.visibility-hidden {
  visibility: hidden;
}

JavaScript

// 最下部までスクロール
const target = document.getElementById('scroll-target');
target.scrollIntoView(false);

// 非表示状態を解除
target.classList.remove('visibility-hidden');

画面遷移後の初期状態ではvisibility: hiddenで要素の領域を保持したまま非表示の状態にしておき、スクロール終了後にJavaScriptでvisibility: hiddenを解除して要素を表示することでちらつきを防げます。

おわりに

以上、ページ遷移直後のちらつきを無くす方法でした。
最後まで目を通していただきありがとうございました！

ソニックガーデン 若手プログラマ Advent Calendar 2024、11日目は@MrTTです。お楽しみに！