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 (

      メッセージ1
      メッセージ2
      {/* ... その他のメッセージ ... */}

  );
};

export default ScrollToBottom;

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

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

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

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