web-dev-qa-db-ja.com

垂直スクロールバーをdivに自動的に追加する方法を教えてください。

私は<Div>に垂直スクロールバーを追加したいです。私はoverflow:autoを試しましたが、うまくいきません。私は自分のコードをFirefoxとChromeでテストしました。ここにDivスタイルのコードを貼り付けています。

float:left;
width:1000px;
overflow: auto;
csshtmlscrollbaroverflow
86
jay

overflow: auto;プロパティを機能させるには、ある程度の高さを割り当てる必要があります。
テスト目的で、height: 100px;を追加して確認します。
また、overflow-y:auto;の代わりにoverflow: auto;を指定すると、要素が水平方向ではなく垂直方向にのみスクロールするため、より適切です。

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

コンテナの高さがわからず、コンテナが固定高さに達したときに垂直スクロールバーを表示したい場合は、100px、heightプロパティの代わりにmax-heightを使用します。

詳細については、こちらをお読みください MDN article .

122
Mr_Green

max-heightプロパティを追加する必要があります。

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>
39
DevT

あなたが設定することができます：

overflow-y: scroll;height: XX px
13
user5650798

私は私のdiv-popupに素晴らしいスクローラを持っていました。適用するには、このスタイルをdiv要素に追加します。

overflow-y: scroll;
height: XXXpx;

指定するheightはdivの高さになります。この高さを超えるコンテンツがある場合は、一度スクロールする必要があります。

ありがとうございました。

11
Ataboy Josef

あなたがdivを何に使用しようとしているのかよくわかりませんが、これはランダムなテキストを含む例です。

Mr_Greenは、overflow-y: autoを追加すると言ったときに正しい指示を出しました。これはJSFiddleの例です。

JSFiddle

9
MitulP91

Divに垂直スクロールバーを表示するには、追加する必要があります

height: 100px;   
overflow-y : scroll;

または

height: 100px; 
overflow-y : auto;
8
Ricardo Romo
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
2
GURU PRASAD