Reactで即時スクロールを実装する方法

目次

Reactで即時スクロールを実装する方法

Reactでチャットアプリケーションやリストビューを作成する際、新しいメッセージが追加されたときにビューを一番下まで自動スクロールさせることがよくあります。
しかし、多くの場合、スムーズなスクロールアニメーションは必要ありません。
今回は、Reactで即時スクロールを実装する方法について説明します。

まず、基本的なコンポーネントを作成します。
以下は、スクロールを制御するためにuseRefとuseEffectを使用したサンプルコードです。

import React, { useEffect, useRef } from 'react';

const ScrollToBottom = () => {
  const endOfMessages = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (endOfMessages.current) {
      endOfMessages.current.scrollIntoView({ behavior: "auto" });
    }
  }, []);

  return (
    <div style={{ height: '300px', overflow: 'auto' }}>
      <div>メッセージ1</div>
      <div>メッセージ2</div>
      {/* ... その他のメッセージ ... */}
      <div ref={endOfMessages} />
    </div>
  );
};

export default ScrollToBottom;

このコンポーネントでは、scrollIntoView メソッドの behavior オプションを "auto" に設定しています。
これにより、要素が表示されるとすぐにビューポート内の指定された位置にスクロールします。
アニメーションは適用されません。

この方法を使用することで、ユーザーが新しいメッセージを見逃すことなく、即時にスクロールを行うことができます。
スムーズなスクロールアニメーションが不要な場合に最適なソリューションです。

この記事では、Reactで即時スクロールを実装する簡単な方法を説明しました。

このテクニックを使って、ユーザー体験を向上させることができます。