Как сделать так, чтобы полоса прокрутки на div отображалась только при необходимости?

151

У меня есть этот div:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

Полосы прокрутки всегда видны, даже если текст не переполняется. Я хочу, чтобы полосы прокрутки были видны только тогда, когда это необходимо, то есть только тогда, когда в поле достаточно текста, чтобы они были нужны. Как текстовая область делает. Как мне это сделать? Или мой единственный вариант стилизовать текстовую область, чтобы она выглядела как div?

css html scrollbar Benubird
источник
Как насчет этого. Показывает только полосу прокрутки при наведении. Не уверен, если это полезно для вас. stackoverflow.com/questions/7125185/…
Райан Болье
codepen.io/anon/pen/QwLeMG Надеюсь, что это поможет вам
vishalkin
overflow: auto;не работает на Android :-(
aioobe

Ответы:

313

Использование overflow: auto. Полосы прокрутки появятся только при необходимости.

(Sidenote, вы также можете указать только для полосы прокрутки x или y: overflow-x: autoи overflow-y: auto).

Hidde
источник
5
Обратите внимание, что overflow-y работает, только если вы укажетеmax-height
Black
1
переполнение-у не нужно максимальная высота. Я никогда не использовал max-height с overflow-y, и он работал каждый раз.
Сумафу
1
@Sumafu вам может понадобиться в зависимости от случая, как я мог испытать прямо сейчас.
Дэвид
1
Вам нужно heightили max-heightустановить, если вы используете absoluteили fixedразмещаете на элементе переполнения, так как это предотвращает изменение размера элемента на основе границ страницы или области просмотра.
Скотт
15

попробуй это:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
kleinohad
источник
7

пытаться

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
pbaris
источник
6

пытаться 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
источник
0

Я обнаружил, что высота div все еще показывает, есть ли у него текст или нет. Таким образом, вы можете использовать это для достижения наилучших результатов.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
Шайлендра Кумар
источник
0

Вы можете попробовать ниже:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Папун Саху
источник