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

AriCosmo

Участник
Привет привет!

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

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

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

overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y - отвечает за отображением содержания блочного элемента по вертикали.
Код CSS:
HTML:
.prokrutka {
overflow:auto;/* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}
Свойства и значения overflow

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

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

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

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

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

Код HTML и CSS
HTML:
<html>
<head>
<title>Пример работы CSS</title>
<metahttp-equiv=Content-Typecontent="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>
<divclass="prokrutka">
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
</div>
</body>
</html>
Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.
Демонстрация работы >>тут<<
Скачать исходник >>тут<<
На этом всё, всем спасибо за внимание!

Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
 
Последнее редактирование:
Сверху