Як зробити так, щоб панель прокрутки на діві була видимою лише тоді, коли це необхідно?

151

У мене є цей дів:

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

Панелі прокрутки завжди видно, навіть якщо текст не переповнюється. Хочу зробити так, щоб смуги прокрутки були видимими лише тоді, коли це необхідно - тобто видно лише тоді, коли в полі є достатньо тексту, який вони потрібні. Як і текстарея. Як це зробити? Або мій єдиний варіант стилістики текста, щоб він виглядав як діва?

css html scrollbar

— Benubird
джерело

Як що до цього. Показує лише смугу прокрутки, якщо навести її на неї. Не впевнений, чи це вам корисно. stackoverflow.com/questions/7125185/…

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMG Сподіваюся, що це може вам допомогти

— vishalkin

overflow: auto;не працює на Android :-(

— aioobe

313

Використовуйте overflow: auto. Панелі прокрутки з’являться лише за потреби.

(Із боку, ви також можете вказати лише x, або y смугу прокрутки: overflow-x: autoі overflow-y: auto).

— Приховано
джерело

5

Зверніть увагу, що overflow-y працює, лише якщо вказатиmax-height

— Чорний

1

overflow-y не потребує максимальної висоти. Я ніколи не використовував max-висоту з overflow-y, і вона працювала щоразу.

— Сумафу

1

@Sumafu вам може знадобитися в залежності від конкретного випадку, як я міг переживати зараз.

— Девід

1

Вам знадобиться heightабо max-heightвстановити, якщо ви використовуєте absoluteабо розміщуєте fixedелемент переповнення, оскільки це заважає елементу змінювати розмір на основі меж сторінки або вікна перегляду.

— Скотт Шупбах

15

спробуйте це:

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

— клейнохад
джерело

7

спробуйте

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

— пбаріс
джерело

6

спробуйте

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

— GrvTyagi
джерело

0

Я виявив, що висота діва все ще відображається, коли вона має текст чи ні. Таким чином, ви можете використовувати це для найкращих результатів.

<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>

— Папун Саху
джерело