この記事では、CSS を使用してコンテンツのオーバーフローを停止し、スクロールを有効にする方法を示します。
コンテンツのオーバーフローを止めてスクロールを有効にする方法は?
コンテンツのオーバーフローを防ぐ目的は、コンテンツがコンテナー内に収まり、Web サイトのパフォーマンスに悪影響を及ぼさないようにすることです。コンテキストを簡単に理解でき、ユーザー側のアクセシビリティを向上させることができます。詳細な説明については、例を通して説明します。
ステップ 1: コンテンツ オーバーフローでスクロールを有効にする
最初に、スクロール効果が適用される HTML ファイル内にテーブルを作成することから始めます。テーブルが既に作成されており、6 行と 7 列で構成されており、いくつかのダミー データがテーブルに提供されているとします。
< テーブル >
< トレ >
< 番目 > 頭1 < / 番目 >
< 番目 > 頭 2 < / 番目 >
< 番目 > 頭 3 < / 番目 >
< 番目 > 頭4 < / 番目 >
< 番目 > 頭 5 < / 番目 >
< 番目 > ヘッド6 < / 番目 >
< 番目 > ヘッド7 < / 番目 >
< / トレ >
< トレ >
< td > 行 1 < / td >
< td > 行 1 < / td >
< td > 行 1 < / td >
< td > 行 1 < / td >
< td > 行 1 < / td >
< td > 行 1 < / td >
< td > 行 1 < / td >
< / トレ >
< トレ >
< td > 行 2 < / td >
< td > 行 2 < / td >
< td > 行 2 < / td >
< td > 行 2 < / td >
< td > 行 2 < / td >
< td > 行 2 < / td >
< td > 行 2 < / td >
< / トレ >
< トレ >
< td > 行 3 < / td >
< td > 行 3 < / td >
< td > 行 3 < / td >
< td > 行 3 < / td >
< td > 行 3 < / td >
< td > 行 3 < / td >
< td > 行 3 < / td >
< / トレ >
< トレ >
< td > 行 4 < / td >
< td > 行 4 < / td >
< td > 行 4 < / td >
< td > 行 4 < / td >
< td > 行 4 < / td >
< td > 行 4 < / td >
< td > 行 4 < / td >
< / トレ >< トレ >
< td > 行 5 < / td >
< td > 行 5 < / td >
< td > 行 5 < / td >
< td > 行 5 < / td >
< td > 行 5 < / td >
< td > 行 5 < / td >
< td > 行 5 < / td >
< / トレ >
< トレ >
< td > 行 6 < / td >
< td > 行 6 < / td >
< td > 行 6 < / td >
< td > 行 6 < / td >
< td > 行 6 < / td >
< td > 行 6 < / td >
< td > 行 6 < / td >
< / トレ >
< / テーブル >
上記のコード スニペットの実行後、Web ページは次のように表示されます。
出力は、テーブル データが読みにくい形式であり、テーブルによって多くのスペースが取得されていることを示しています。
ステップ 2: オーバーフローとスクロール効果の設定 上記のコード スニペットでは、次のようになります。 上記のコード スニペットの実行後、Web ページは次のように表示されます。 この Web ページは、テーブルが消費するスペースが減り、コンテンツがオーバーフローするのを防いでいることを示しています。さらに、スクロール効果が有効になりました。 ノート ： 設定することにより ' オーバーフロー: 自動 ' また ' オーバーフロー: スクロール 」、ユーザーはオーバーフローしたコンテンツのスクロールを有効にできます。加えて ' オーバーフロー: 非表示 」を使用して、オーバーフローを完全に防ぐことができます。 「overflow-x」および「overflow-y」プロパティは、オーバーフローを制御し、水平軸および垂直軸でのスクロールを有効にするために利用されます。コンテンツがオーバーフローするのを防ぎ、スクロールを可能にして、すべてのデバイスでインタラクティブなレスポンシブ デザインを作成します。この記事では、CSS を使用してコンテンツのオーバーフローを停止し、スクロールを有効にする方法を示しました。
その後、テーブルを親でラップします “
。オーバーフロー {
幅 : 200px ;
身長 : 200px ;
オーバーフロー-X : 自動 ;
オーバーフロー-y : 自動 ;
スクロール動作 : スムーズ ;
}
結論