📜

【React/Next.js】任意の要素まで自動スクロールする方法

に公開
Next.js
React
frontend
スクロール
tech

きっかけ

アプリを作成する中で、フロント側で入力した値を用いてデータ取得を実行し、取得したデータを画面に表示していました。スマホで使うことを想定していたため、表示エリアがスマホの画面の下の方で見切れてしまっており、どうにかできないかと思っていました。
そこで、データを取得した後にそのエリアまで自動スクロールさせればUX的にもより良くなると思い、やり方をまとめてみました。

結論

  1. useRef宣言
  2. スクロールさせたい要素のref属性に1を渡す
  3. イベントハンドラやuseEffect内でスクロール処理の実行
サンプルコード例
"use client";
import { useRef } from "react";

export default function examplePage() {
    const cardRef = useRef<HTMLDivElement>(null);  // 1

    const onClickScroll = () => {
        cardRef.current?.scrollIntoView({  // 3
          behavior: "smooth",
          block: "center",
        });
    };

  return (
    <div>
        <button onClick={onClickScroll}>
            スクロールさせる
        </button>
        <div ref={cardRef}>  // 2
            // 表示したい内容
        </div>
    </div>
  );
}
  • サンプルコードのみだと画面内に収まるので、動作確認等は高さを作ってからやってみてください。
  • 詳細は公式ドキュメントを参照していただければと！

Discussion