1. ホーム
  2. html

[解決済み] CSSでdivを縦にスクロールできるようにする

2022-03-15 21:18:03

質問

これは

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

が与える div で、ユーザーが水平方向と垂直方向の両方でスクロールできるようにします。どうすれば、divが のみ 縦方向にスクロール可能か?

解決方法は?

間違ったプロパティを使用することを除けば、あなたはそれをカバーしています。スクロールバーは任意のプロパティで起動できます。 overflow , overflow-x または overflow-y のいずれかに設定し、それぞれを visible , hidden , scroll , auto または inherit . 現在ご覧になっているのは、この2つです。

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

  • scroll - この値 は、たとえコンテンツが設定された境界を越えていない場合でも、何があってもスクロールバーを表示します。コンテンツがスクロールする必要がない場合、バーは "disabled" または non-interactive として表示されます。

もし、あなたが 常に 縦スクロールバーを表示させたい。

を使用する必要があります。 overflow-y: scroll . これは フォース は、必要であるかどうかにかかわらず、縦軸にスクロールバーを表示します。コンテキストを実際にスクロールできない場合、"disabled" スクロールバーとして表示されます。

ボックスをスクロールできる場合にのみ、スクロールバーを表示させたい場合。

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