Иногда нам нужно разместить большую информацию, что под нее можно создать блок, в котором будет находится прокрутка. А вот как все сделать в этой статье как можно подробнее разберем, это само создание блока, плюс, идет к нему фиксированная ширина размера, где и будет происходить прокрутка, как в горизонтальном, так вертикальном виде. Все это можно сделать при помощи стилистики CSS, где будет отвечать свойство overflow.
Если рассматривать свойство overflow, то оно по умолчанию отвечает за отображение содержания блочного элемента. Также его очень часто применяют, это когда контент не полностью помещается и из этого выходит за область блока.
overflow-x - будет контролировать содержания блочного элемента по горизонтали.
overflow-y - здесь полностью отвечает за отображением содержания блочного элемента, но уже по вертикали.
HTML
Код
<div class="velekope-kenlasgun">
Здесь идет описание.
</div>
CSS
Код
.velekope-kenlasgun {
height: 195px;
width: 297px;
background: #f7f7f7;
border: 1px solid #b9b3b3;
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}
Также рекомендую посмотреть схожим материал про создание div блок сайта с прокруткой, только немного по другому создано в плане стилей, но фактура аналогична.
Демонстрация
