Як я можу автоматично додати вертикальну смугу прокрутки до свого діва?

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 .

— Mr_Green
джерело

Так, я зрозумів ваше тестування, він працює чудово в 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

14

Я отримав дивовижний скроллер на своєму div-popup. Щоб застосувати, додайте цей стиль у свій елемент div:

overflow-y: scroll;
height: XXXpx;

Вказане heightвами буде висотою діва, і якщо у вас є вміст, що перевищує цю висоту, вам потрібно прокрутити його.

Дякую.

— Атабой Йосиф
джерело

13

Щоб відобразити вертикальну смугу прокрутки у вашому div, вам потрібно додати

height: 100px;   
overflow-y : scroll;

або

height: 100px; 
overflow-y : auto;

— Рікардо Ромо
джерело

10

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

Mr_Green дав правильні вказівки, коли сказав додати, overflow-y: autoяк це обмежує вертикальне прокручування. Це приклад JSFiddle:

JSFiddle

— MitulP91
джерело

Перш за все @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 .

— ковбой