【React】サイトを開いた際に特定の要素まで自動スクロールさせてみる

はじめに

本記事では、useEffectとscrollIntoViewメソッドを組み合わせて画面表示後に指定した要素まで自動でスクロールする処理を実装します。

環境

• vite
• tailwindcss
• react

scrollIntoViewメソッドを使用した例

useRefでスクロール先の要素への参照オブジェクトを作成し、ref属性でスクロール先の要素と変数targetRefを紐付けます。
DOM要素が構築された後にsollIntoView()メソッドを実行し、対象の要素までゆっくりスクロールを行います。

import { useEffect, useRef } from 'react';

const App = () => {
  const targetRef = useRef(null);
  // 初期状態
  console.log("初期状態", targetRef); // { current: null }

  useEffect(() => {
    // レンダリング後
    console.log("レンダリング後",targetRef); // { current: div～～ }

    if (targetRef.current) {
      targetRef.current.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' 
      });
    }
  }, []);

  return (
    <>
      {/* スクロール前の上部スペース */}
      <div className="h-screen bg-gray-100 flex items-center justify-center">
        <h1 className="text-2xl">上部スペース</h1>
      </div>

      {/* スクロール先の要素 */}
      <div 
        ref={targetRef}
        className="h-screen bg-blue-100 flex items-center justify-center"
      >
        <h2 className="text-2xl">自動スクロール先</h2>
      </div>

      {/* スクロール後の下部スペース */}
      <div className="h-screen bg-gray-100 flex items-center justify-center">
        <h3 className="text-2xl">下部スペース</h3>
      </div>
    </>
  );
};

export default App;

• scrollIntoView
  • behavior：即座にスクロール or 滑らかにスクロールするか挙動を制御
    • 'smooth': アニメーションのついた滑らかなスクロール
  • block：垂直方向の配置
    • 'start': 要素を表示領域の上端に配置

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView#behavior

ブラウザで確認

サーバを立ち上げてブラウザで挙動を確認してみると、レンダリングされた際にスクロール先の要素まで自動で移動していることを確認できました。

参考