React にスクロールバー機能を実装する

React は、手間をかけずにユーザーフレンドリーなインターフェイスを実装できるため、人気のあるフロントエンド ライブラリです。

最も一般的な問題の 1つは、大量のデータを表示するユーザー フレンドリーな方法を見つけることです。 スクロールバーは、データ オーバーフローを処理するためのシンプルで使いやすいソリューションです。

このガイドでは、React の個々のコンポーネントにスクロールバーを適用する方法について説明します。

React でスクロールバーを実装する

React で多すぎるコンテンツを処理する方法は複数あります。 スクロールバー機能を実装する最も簡単な方法は、CSS を使用することです。

この例では、1つの親コンポーネントと 1つの子コンポーネントがあります。 <Section> コンポーネントのメイン コンテナーに section の className 値を与えます。

export default function App() {
  return (
    <div className="App">
      <Section>
        some text
      </Section>
      <Section>
        some text
      </Section>
      <Section>
          some text
      </Section>
    </div>
  );
}
function Section(props) {
  return <div className="section">{props.children}</div>;
}

次に、CSS に移動して、スタイルを子コンポーネントに適用します。

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.section {
  border: 2px solid red;
  width: 30%;
  font-size: 20px;
  overflow-y: scroll;
}

overflow-y CSS プロパティはここで最も重要です。 scroll の値を指定すると、コンテンツ (この場合はテキスト) がコンテナーに収まらない場合は常にスクロールバーを作成するように HTML に指示します。

overflow-y プロパティは y 軸を指定するため、これは幅には影響せず、高さのみに影響します。

このプロパティがないと、テキストがコンポーネントの境界線からはみ出してしまいます。

この CodeSandbox のライブ デモ にアクセスして、このプロパティを適用した効果を確認できます。

3つの <Section> コンポーネントがあります。 最初のものには、通常のサイズに収まらないテキストが多すぎます。

そのため、スクロールバーがあり、下にスクロールして全文を表示できます。 中央のコンポーネントにはテキストが多すぎないため、下にスクロールする必要はありません。

最後のコンポーネントでは、最初のコンポーネントと同様に下にスクロールできます。

この CSS プロパティを使用して、必要なコンポーネントだけにスクロールバーを選択的に適用できます。 親コンポーネントについても同じことができます。