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

110

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

Я вставляю сюда код стиля div:

float: left;
width: 1000px;
overflow: auto;
css html scrollbar overflow сойка
источник
jsfiddle или более css с вашей разметкой
Ritabrata Gautam
12
Попробуйте это: overflow-y:scrollи немного высоты . Просмотрите эту документацию .
Mr_Green
Спасибо Mr_Green за ответ. Но этот код у меня не работает.
Джей
Чтобы прокрутка заработала, внутреннее содержимое должно переполняться .
Mr_Green
Разместите здесь свой код HTML и CSS.
Mr_Green

Ответы:

145

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

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

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

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

Мистер Грин
источник
Да, я понял вашу точку зрения и протестировал, он отлично работает в Chrome, но не в FireFox. Еще одна непонятная вещь - вертикальная полоса прокрутки появляется во время загрузки страницы в FF, но исчезает, когда загрузка страницы завершена!
Джей
«Вам нужно назначить высоту» именно моя проблема, спасибо! : P
Вагнер да Силва
51

Вы должны добавить 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>
Развернуть фрагмент

DevT
источник
20

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

overflow-y: scroll;height: XX px

источник
2
это было предложено предыдущими ответами.
UmNyobe
15

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

overflow-y: scroll;
height: XXXpx;

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

Спасибо.

Атабой Йозеф
источник
13

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

height: 100px;   
overflow-y : scroll;

или

height: 100px; 
overflow-y : auto;
Рикардо Ромо
источник
10

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

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

JSFiddle

МитулП91
источник
Прежде всего @Mr_Green ваше предложение отлично работает в Chrome, но не в FF. И есть ли альтернатива добавления высоты, потому что я не могу добавить высоту в свой Div для моей структуры дизайна.
Джей
2 

::-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
Пожалуйста, добавьте пояснение к своему ответу
Мастиса
источник (и объяснение) выглядит так: simurai.com/blog/2011/07/26/webkit-scrollbar .
cobberboy