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


560

この

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

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


36
そこだoverflow-xoverflow-yやるCSS3、中にあなたは何をしたいです。
マークB

回答:


699

間違ったプロパティを使用することは別として、あなたはそれをカバーしています。スクロールバーは、任意のプロパティを使用してトリガすることができoverflowoverflow-xまたはoverflow-y、それぞれの任意に設定することができvisiblehiddenscrollauto、またはinherit。現在、次の2つを見ています。

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

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

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

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

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

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


4
オーバーフローの使用:autoはどういうわけか、ページの下部に巨大な空のブロックを作成します。これはよくあることですか?
Stupid.Fat.Cat

268

このようにしてみてください。

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


1
良い解決策ですが、スクロールは高さに関係なく常に表示されます
FindOutIslamNow

7
overflow-y値を「auto」に設定すると、定義された高さの後にスクロールが表示されます。たとえば、<div style = "overflow-y:auto; height:200">
Umair Gul

123

ビューポートの高さを100%にするには:

overflow: auto;
max-height: 100vh;

52

使用する overflow-y: auto;divでします。

また、幅も設定する必要があります。


13
なぜ幅を設定する必要があるのですか?
LeeGee 2013

1
@LeeGeeには、divのコンテンツがdiv境界の外に出たかどうか、つまりスクロールを有効にするかどうかを計算するための幅が必要です。
Roberto Bonini、2016年

幅はデフォルトで100%ではありませんか?
LeeGee 2016年

1
@LeeGeeいいえ、autoデフォルトです。通常、これは親の幅の100%を意味しますが、常にそうとは限りません。
マダラのゴースト

31

代わりにこのコードを使用できます。

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">


overflow-x:overflow-xプロパティは、コンテンツの左/右端をどう処理するかを指定します-要素のコンテンツ領域をオーバーフローする場合。
overflow-y:overflow-yプロパティは、コンテンツの上/下のエッジをどうするかを指定します-要素のコンテンツ領域をオーバーフローする場合。表示される

値:デフォルト値。コンテンツはクリップされず、コンテンツボックスの外側にレンダリングされる場合があります。hidden:コンテンツはクリップされ、スクロールメカニズムは提供されません。scroll:コンテンツがクリップされ、スクロールメカニズムが提供されます。auto:オーバーフローしたボックスにスクロールメカニズムを提供する必要があります。初期




:このプロパティをデフォルト値に設定します。
inheritこのプロパティを親要素から継承します。


15

overflow-y: scroll縦スクロールに使用できます。

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>


9

私にとってこれらすべての答えの問題は、反応がないことでした。親divの高さを固定しなければなりませんでした。また、メディアクエリをいじくりまわすのに大量の時間を費やしたくありませんでした。Angularを使用している場合は、ブートストラップタブセットを使用できます。内部コンテンツをスクロールできるようになり、応答が速くなります。タブを設定するとき$scope.tab = { title: '', url: '', theclass: '', ative: true };は、次のようにします。...重要なのは、タイトルや画像のアイコンは必要ないということです。次に、次のようにcsでタブのアウトラインを非表示にします。

.nav-tabs {
   border-bottom:none; 
} 

そしてこれ.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} と最後に、これを実装しなくてもクリックできる非表示のタブを削除します。.nav > li > a {padding:0px;margin:0px;}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.