Как я могу добавить вертикальную полосу прокрутки в мой div автоматически?

Я хочу добавить вертикальную полосу прокрутки в мой <Div>. Я пробовал overflow:auto, но он не работает. Я тестировал свой код в Firefox и Chrome. Я вставляю код стиля Div здесь:

float:left;
width:1000px;
overflow: auto;

Спасибо заранее.

Ответ 1

Вам нужно назначить некоторую высоту, чтобы сделать свойство overflow: auto;.
Для целей тестирования добавьте height: 100px; и проверьте.
и также будет лучше, если вы дадите overflow-y:auto; вместо overflow: auto;, потому что это заставляет элемент прокручивать только вертикальный, но не горизонтальный.

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

Если вы не знаете высоту контейнера и хотите показывать вертикальную полосу прокрутки, когда контейнер достигает фиксированной высоты, скажите 100px, используйте max-height вместо свойства height.

Для получения дополнительной информации прочитайте эту статью MDN.

Ответ 2

Вам нужно добавить свойство 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>

Ответ 3

У меня есть потрясающий скроллер на моем div-popup. Чтобы применить, добавьте этот стиль в свой элемент div:

overflow-y: scroll;
height: XXXpx;

Указанный height будет высотой div и один раз, если у вас есть содержимое, чтобы превысить эту высоту, вам нужно прокрутить его.

Спасибо.

Ответ 4

Вы можете установить:

overflow-y: scroll;height: XX px

Ответ 5

Я не совсем уверен, что вы пытаетесь использовать div, но это пример с некоторым случайным текстом.

Mr_Green дал правильные инструкции, когда сказал, чтобы добавить overflow-y: auto, поскольку это ограничивает его вертикальной прокруткой. Это пример JSFiddle:

JSFiddle

Ответ 6

Чтобы показать вертикальную полосу прокрутки в вашем div, вам нужно добавить

height: 100px;   
overflow-y : scroll;

или

height: 100px; 
overflow-y : auto;