CSSを使用してdivを垂直にスクロール可能にする 質問する

CSSを使用してdivを垂直にスクロール可能にする 質問する

これ

<div id="" style="overflow:scroll; height:400px;">

divユーザーが水平方向と垂直方向の両方にスクロールできることを示します。div が垂直方向にのみスクロール可能になるように変更するにはどうすればよいですか?

ベストアンサー1

overflow間違ったプロパティを使用している以外は、これで完了です。スクロール バーは、任意のプロパティ、overflow-x、でトリガーでき、それぞれ、、、、 のoverflow-yいずれかに設定できます。現在、次の 2 つが表示されています。visiblehiddenscrollautoinherit

  • auto- この値はボックスの幅と高さを参照します。これらが定義されている場合、ボックスはそれらの境界を超えて拡張されません。代わりに (コンテンツがそれらの境界を超えた場合)、長さを超えたいずれかの境界 (または両方) に対してスクロールバーが作成されます。

  • scroll- この値は、コンテンツが設定された境界を超えない場合でも、何があってもスクロールバーを強制します。コンテンツをスクロールする必要がない場合は、バーは「無効」または非インタラクティブとして表示されます。

垂直スクロールバーを常に表示したい場合:

を使用する必要がありますoverflow-y: scroll。これにより、必要かどうかに関係なく、垂直軸のスクロールバーが強制的に表示されます。コンテキストを実際にスクロールできない場合は、「無効な」スクロールバーとして表示されます。

ボックスをスクロールできる場合にのみスクロールバーを表示する場合:

を使用してくださいoverflow: auto。デフォルトでは、コンテンツが現在の行に収まらない場合は次の行に改行されるため、水平スクロールバーは作成されません (折り返しが無効になっている要素上にある場合を除く)。垂直バーの場合、コンテンツは指定した高さまで拡張されます。その高さを超えると、残りのコンテンツを表示するための垂直スクロールバーが表示されますが、高さを超えない場合はスクロールバーは表示されません。

おすすめ記事