HTML: Как создать DIV только с вертикальными полосами прокрутки для длинных абзацев?

Question

Я хочу показать примечание к условиям на моем веб-сайте. Я не хочу использовать текстовое поле, а также не хочу использовать всю мою страницу. Я просто хочу отобразить свой текст в выделенной области и хочу использовать только вертикальную полосу прокрутки, чтобы перейти вниз и прочитать весь текст.

В настоящее время я использую этот код:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Две проблемы:

1. Он не фиксирует ширину и высоту и не расширяется, пока не появится весь текст.
2. Во-вторых, отображается горизонтальная полоса прокрутки, и я не хочу ее показывать.

Answer 1

Использование overflow-y. Это свойство CSS 3.

Answer 2

, чтобы скрыть горизонтальные полосы прокрутки, вы можете установить overflow-x на скрытый, например:

overflow-x: hidden;

Answer 3

Вам необходимо указать width и height в px:

width: 10px; height: 10px;

Кроме того, вы можете использовать overflow: auto;, чтобы не показывать горизонтальную полосу прокрутки.

Поэтому вы можете попробовать следующее:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

Answer 4

Сначала спасибо

Используйте overflow:auto это работает для меня.

исчезает горизонтальная полоса прокрутки.

Answer 5

Для любого случая установите overflow-x на hidden, и я предпочитаю установить max-height, чтобы ограничить расширение высоты div. Ваш код должен выглядеть так:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

Answer 6

Чтобы показать вертикальную полосу прокрутки в вашем div, вам нужно добавить

height: 100px;   
overflow-y : scroll;

или

height: 100px; 
overflow-y : auto;

Answer 7

overflow-y : scroll;
overflow-x : hidden;

height необязательно

Answer 8

Вы можете использовать свойство переполнения

style="overflow: scroll ;max-height: 250px; width: 50%;"

Answer 9

Я тоже сталкивался с той же проблемой ... попробуйте сделать это ... это сработало для меня

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }