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

110

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

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

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

— сойка
источник

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