Reactでスクロール位置を設定する

最近の Web アプリケーションは、多くのコンテンツを表示する傾向があります。 ユーザーは、探しているものを見つけるためにページ全体をスクロールすることを余儀なくされることがよくあります。

これは悪いユーザー エクスペリエンスです。 解決策は、ユーザーがスクロールせずに特定のページ セクションにスキップできるボタンを作成することです。

この記事では、React で固定スクロール位置を設定する方法について説明します。

Reactでスクロール位置を設定する

まず、DOM 要素への参照を JavaScript 変数に格納する必要があります。 そのために、本質的にネイティブ JavaScript の getElementById() メソッドの代わりとなる useRef() フックを使用できます。

例を見てみましょう：

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);

  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
    </div>
  );
}

ここでは、useRef() フックを使用して ref 値を生成します。 useRef() フックへの引数は、ref の初期値になります。

フックは、変数に格納できる参照も返します。 welcome、about、および terms 変数に ref 値を保存します。

JSX 内で、3つの要素の ref 属性を、ref を格納した変数に等しく設定します。 これにより、<h1> タグのような DOM 要素が JavaScript 変数に関連付けられます。

次に、これらの要素に直接移動するイベント ハンドラーを作成します。

注: JavaScript 変数への参照を中かっこで囲むことを忘れないでください。 JSX 内に JavaScript 式 (変数への参照など) を記述する必要があります。

次に、1つの引数 (ref 値) を取り、スクロール位置をその DOM 要素の上部境界に設定するイベント ハンドラーを作成しましょう。

const setScrollPosition = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

このように、イベント ハンドラーは再利用可能で、特定の要素へのスクロールに使用できます。 スクロール位置を設定する必要があるのは、特定の ref 変数をイベント ハンドラーに渡すことだけです。

そのために、React を含む JavaScript ライブラリでネイティブに利用できる window インターフェイスの scrollTo() メソッドを使用します。

ref 値の current プロパティにアクセスして、DOM 要素の上部境界線を決定します。 scrollTo() メソッドを使用して、スクロール位置の上部を DOM 要素の上部境界に設定します。

スムーズなナビゲーションを設定するには、scrollTo メソッドの behavior プロパティも指定します。

次に、コンポーネントの完全なコードを見てみましょう。

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);
  const setScrollPosition = (ref) => {
    window.scrollTo({
      top: ref.current.offsetTop,
      behavior: "smooth"
    });
  };
  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
      <div className="buttons">
        <button onClick={() => setScrollPosition(welcome)}>
          Skip to Welcome
        </button>
        <button onClick={() => setScrollPosition(about)}>
          Skip to 'About Us'
        </button>
        <button onClick={() => setScrollPosition(terms)}>Skip to terms</button>
      </div>
    </div>
  );
}

この最終的なコードでは、3つのボタンを持つスティッキー フッターを追加します。 この ライブ CodeSandBox デモ を開いて、アプリケーションの動作を確認できます。

いずれかのボタンをクリックすると、特定の DOM 要素にフォーカスしたスクロール位置が設定されます。

これは、onClick イベント ハンドラーで、前に定義した setScrollPosition() 関数を呼び出すためです。 イベント ハンドラを設定する要素の ref 値を格納する変数である 1つの引数を指定します。