Как сделать так, чтобы полоса прокрутки на 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>

— Папун Саху
источник