аватар |

Статьи / CSS /

Как создать div блок с прокруткой?


1. Что такое overflow в CSS?
2. Свойства и значения overflow
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.

О полезном свойстве overflow


Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.

overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y - отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

.prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}


Свойства и значения overflow


visible - отображается все содержание элемента, даже за пределами установленной ширины.
hidden - отображается только область внутри элемента, остальное скрыто.
scroll - принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

.prokrutka {
width:150px; /* ширина нашего блока */
height:100px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}

Принудительная установка прокрутки в блоке CSS


Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

.prokrutka {
height:150px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}

Пример div блока с прокруткой


Код HTML и CSS

<html>
  <head>
    <title>Пример работы CSS</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">

<style>
.prokrutka {
height: 200px; /* высота нашего блока */
width: 200px; /* ширина нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}
</style>

  </head>

  <body>
<div class="prokrutka">
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. 
</div>
  </body>
</html>

Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.

Демонстрация Скачать исходники

Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.

Спасибо за внимание! Надеюсь статья была полезна!
 



Распечатать
Похожие статьи
27 ноября 2013 19:53 Набор и примеры элементов Flat UI
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
04 сентября 2015 16:46 Как расположить несколько блоков div в ряд?
31 мая 2017 18:46 Как создать индикатор (полосу) прокрутки страницы на CSS3?
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS


Комментарии к статье (vk.com)