垂直スクロールおよび水平スクロールは、マウス、タッチパッド、または指を使用して Web ページを移動する方法です。垂直スクロールは、要素のコンテンツがコンテナの高さを超える場合に使用されます。一方、水平スクロールは、要素内のコンテンツがコンテナの幅を超える場合に使用されます。垂直スクロールでは Web ページを上下に移動でき、水平スクロールではページを左右に移動できます。 Tailwind CSS は、Web ページ上で垂直および水平スクロールを可能にするユーティリティ クラスを提供します。
この記事では次の例を説明します。
Tailwind で垂直スクロールを有効にする方法
Tailwind で垂直スクロールを有効にするには、「 オーバーフローしてスクロール 」ユーティリティ クラスを HTML プログラム内の目的の要素に含めます。これにより、垂直スクロールが可能になり、ユーザーがシステム設定で「常に表示」スクロールバーを無効にしない限り、常にスクロールバーが表示されます。
構文
< エレメント クラス = 「オーバーフロー、スクロール...」 > ... エレメント >
例: 垂直スクロールを有効にする
この例では、列にいくつかのフレックス項目を含むフレックス コンテナを作成し、「 オーバーフローしてスクロール ” ユーティリティ:
< 体 >
< ディビジョン クラス = 「flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36」 >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 1 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 2 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 3 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 4 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 5 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 6 ディビジョン >
ディビジョン >
体 >
ここで、親
- 「 フレックス 」クラスは、柔軟なレイアウトを作成することで、利用可能なスペースに基づいて子要素のサイズを調整するために使用されます。
- 「 フレックスコル 」クラスはコンテナのフレックス方向を列に設定します。
- 「 オーバーフローしてスクロール ” クラスを使用すると、垂直スクロールが可能になります。
- 「 bg-パープル-700 」クラスは、コンテナの背景に紫色を設定します。
- 「 p-4 」クラスは、コンテナーのすべての側面に 4 単位のパディングを設定します。
- 「 MX-14 ” クラスは、コンテナーの X 軸に 14 単位のマージンを適用します。
- 「 mt-5 ” クラスは、コンテナーの上部に 5 単位のマージンを適用します。
- 「 h-36 」クラスはコンテナの高さを 36 単位に設定します。
子
- 「 BG-イエロー-400 ” クラスは、グリッド項目の背景を黄色に設定します。
- 「 p-2 」クラスは、フレックス項目内のコンテンツに 3 単位のパディングを追加します。
- 「 m-2 」クラスは、フレックス項目に 2 単位のマージンを設定します。
出力
上記の出力では、垂直スクロールが正常に有効になっていることがわかります。
Tailwind で水平スクロールを有効にする方法
Tailwind で水平スクロールを有効にするには、「 オーバーフロー-x-スクロール 」 HTML プログラム内の特定の要素を持つユーティリティ クラス。これにより、水平スクロールが有効になり、ユーザーがシステム設定で「常に表示」スクロールバーを無効にしない限り、常にスクロールバーが表示されます。
構文
< エレメント クラス = 「オーバーフロー-x-スクロール ...」 > ... エレメント >
例: 水平スクロールを有効にする
この例では、行にいくつかのフレックス項目を含むフレックスコンテナを作成し、「 オーバーフロー-x-スクロール ” ユーティリティ:
< 体 >< ディビジョン クラス = 「flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36」 >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 1 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 2 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 3 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 4 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 5 ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 p-2 m-2」 > 6 ディビジョン >
ディビジョン >
体 >
ここの親
出力
上記の出力は、水平スクロールが正常に有効になったことを示しています。
結論
Tailwind で垂直スクロールと水平スクロールを有効にするには、「 オーバーフローしてスクロール ' と ' オーバーフロー-x-スクロール 」ユーティリティクラスがそれぞれ使用されます。これらのユーティリティは HTML プログラム内の目的の要素に適用され、垂直および水平スクロールが可能になり、常にスクロールバーが表示されます。この記事では、Tailwind で垂直スクロールと水平スクロールを有効にする方法を説明しました。