Как добавить полосу прокрутки в div

Содержание

Фон
О переполнении
Как добавить горизонтальную полосу прокрутки
Как добавить вертикальную полосу прокрутки

Фон

В HTML есть контейнер разделения — или

— который может инкапсулировать данные и элементы HTML. Затем этими данными можно управлять с помощью стилей CSS и JavaScript. Помимо других функций, вы также можете добавить полосу прокрутки в свой контейнер div с помощью CSS.

О переполнении

Предположим, вы создали контейнер div и заранее задали для него некоторые размеры — скажем, 100×200 пикселей. Что делать, если позже, когда вы добавляете данные, ваши данные не могут быть отображены при заданных размерах? К счастью, в CSS есть свойство overflow для работы с обрезанными данными из-за ограниченных размеров контейнера. Вы можете настроить overflow , используя следующие значения:

visible : переполнение не обрезается. Он отображается вне рамки элемента. Это значение по умолчанию.
hidden : переполнение обрезается, поэтому остальное содержимое будет невидимым.
scroll : переполнение обрезается, но добавляется полоса прокрутки для просмотра остального содержимого.
auto : если переполнение ограничено, необходимо добавить полосу прокрутки , чтобы увидеть остальное содержимое.
initial : использует значение по умолчанию, visible .
inherit : устанавливает переполнение равным значению его родительского элемента.

Как добавить горизонтальную полосу прокрутки

Давайте посмотрим на код ниже:

Вывод
HTML

В приведенном выше коде мы устанавливаем ширину в 200px и определил свойство white-space как nowrap . Размер контейнера теперь ограничен шириной 200 пикселей , и если текст превышает размеры контейнера, он не переносится на следующую строку. Затем мы определили overflow-x как scroll , который добавляет полосу прокрутки, если текст обрезан по горизонтальной оси..

Как добавить вертикальную полосу прокрутки

Давайте посмотрим на код ниже:

Вывод
HTML

Точно так же теперь мы ограничили высоту значением 100 пикселей . Для просмотра текста, высота которого превышает 100 пикселей , мы установили для свойства overflow-y значение scroll .