Как создать 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.
Спасибо за внимание! Надеюсь статья была полезна!
Создаем блок с прокручиваемым текстом с помощью CSS и HTML
Прокручиваемый HTML-блок — это блок, в котором, когда его содержимое больше размеров самого блока, справа и снизу появляются полосы прокрутки. Другими словами, если у вас есть блок, в котором может поместиться около 50 слов, и у вас есть текст, состоящий из 200 слов, в прокручиваемом HTML-блоке появятся полосы прокрутки, чтобы вы могли видеть остальные 150 слов. В стандартном HTML-блоке дополнительный текст просто выходит за его границы.
Создать прокручиваемый HTML-блок (скролл для сайта) довольно просто.
Вам просто нужно установить ширину и высоту элемента, а затем использовать свойство CSS overflow, чтобы указать поведение элемента, когда содержимое выходит за его пределы.
Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:
- Перепишите текст, чтобы он стал короче.
- Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
- Обрежьте текст там, где он выходит за пределы контейнера.
- Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.
Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.
HTML и CSS для этого:
<div>здесь текст....</div>
overflow: auto; указывает браузеру добавлять полосы прокрутки (скролл), если текст выходит за границы блока div.
Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.
Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden. Если вы не укажете свойство overflow, скролл на сайте работать не будет, и текст будет выходить за границы блока div.
Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, можно добавить вокруг него полосы прокрутки так же, как и для текста.
<p><img src="images/shasta_with_disc.jpg" alt="Shasta playing frisbee" /> </p>
В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.
Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow (как способ сделать скролл), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,
Самый простой способ сделать это — так же, как изображение и текст, просто оберните таблицу в блок div, установите его ширину и высоту и добавьте свойство overflow (скролл внутри div):
<div><table> <thead> <tr> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>Jennifer</td> <td>502-5366</td> </tr> .... </tbody></table></div>
Однако при этом имеет место один нюанс. В подобных случаях, как правило, также появляется горизонтальный скролл, потому что браузер предполагает, что, чтобы дать пользователю возможность просмотреть всю таблицу, нужны две полосы прокрутки.
Существует множество способов исправить это, например, изменение ширины таблицы и некоторые другие. Но я предпочитаю просто отключить горизонтальную прокрутку с помощью свойства CSS3 overflow-x. Просто укажите для блока div свойство overflow-x: hidden;, и горизонтальная полоса прокрутки будет удалена. Обязательно проверьте, чтобы одновременно с этим у вас не исчез и сам контент.
<div>
Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot. Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.
Это работает только в Firefox, что не очень хорошо, но это полезная функция, если ваши читатели используют только Firefox. Посмотрите следующий пример, чтобы понять, что я имею в виду.
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
... Данная публикация представляет собой перевод статьи «HTML Scroll Box» , подготовленной дружной командой проекта Интернет-технологии.ру
Как сделать полосу прокрутки CSS
Свойство overflow при помощи своих параметров управляет тем, как будет отображаться содержание блока, если оно выходит за пределы установленных размеров.
overflow : auto;
overflow : scroll;
overflow : visible;
overflow : hidden;
overflow : inherit;
auto – автоматический параметр который добавляет полосы прокрутки только по необходимости.
scroll – при выборе этого параметра добавляется прокрутка на постоянной основе.
visible – данный параметр задаёт видимость всего содержимого элемента.
hidden – параметр задаёт отображение только внутри области элемента.
inherit – наследование значения родителя.
HTML
<div>
<p>В данном контейнере высота составляет сто тридцать пикселей, а ширина двести пикселей.</p>
<p>Так как объём текста превышает предел контейнера, появляется полоса прокрутки.</p>
</div>
<div>
<p>В данном контейнере высота и ширина составляет двести пикселей, а текст не выходит за пределы контейнера.</p>
</div>
CSS .box { width: 200px; overflow: auto; margin: 40px auto; padding: 5px 20px; border: solid 1px black; } .big { height: 200px; } .small{ height: 130px; }
HTML
<div>
<p>Иногда в маленьком окне требуется показать код.</p>
<pre>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</pre>
</div>
CSS
.box-code {
width: 220px;
height: 220px;
overflow: auto;
margin: 50px auto;
padding: 4px 12px;
border: solid 1px black;
}
HTML
<div>
<p>Прокрутка добавляется независимо от размера содержания.</p>
</div>
CSS
.box-scroll{
width: 250px;
height: 150px;
overflow: scroll;
margin: 0px auto;
padding: 6px 18px;
border: solid 1px black;
}
HTML
<div>
<p>Применив свойство visible, текст будет отображаться даже вне установленных габаритов.</p>
<p>Размеры этого контейнера, границы которого обозначены тонкой чёрной линией, составляютдвести сорок пикселей по ширине и сто двадцать пикселей по высоте.</p>
</div>
CSS
.box-visible{
width: 240px;
height: 120px;
overflow: visible;
margin: 0px auto;
padding: 5px 20px;
border: solid 1px black;
}
HTML
<div>
<p>Используя свойство hidden, текст будет скрыт, если он выходит за установленные границы.</p>
<p>Размеры этого контейнера, границы которого обведены чёрной линией, составляют двести пятьдесят пикселей по ширине и сто двадцать пять пикселей по высоте.</p>
</div>
CSS
.box-hidden{
width: 250px;
height: 125px;
overflow: hidden;
margin: 0px auto;
padding: 5px 20px;
border: solid 1px black;
}
div с прокруткой
Вступление
Иногда необходимо большой кусок текста разместить в маленьком окошке, который полностью туда не помещается, для решения этой проблемы легко создать слой с прокруткой — div с прокруткой.
Понадобится
Слой с фиксированным размером и CSS-стиль.
CSS
В CSS-классе .scroll устанавливаются параметры 600px в длину и 300px в высоту, внутренний отступ, рамка и цвет фона. НО! Самое главное параметр overflow:auto устанавливает появление полосы прокрутки при количестве текста большим, чем размер слоя.
.scroll { width:500px; height:300px; /* необходим фиксированный размер */ overflow:auto; /* прокрутка появляется по необходимости */ padding:10px 20px; border:#999 1px solid; background-color:#FAFAFA; }
HTML
<div>Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок. Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы. Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км. При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15—20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.</div>
Результат
На экране вы увидите небольшую рамку с текстом и с границей серого цвета.
Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок.
Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы.
Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км.
При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15—20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.
overflow-x | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.5+ | 3.0+ | 1.5+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | visible |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-box/#overflow-x |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.
Синтаксис
overflow-x: auto | hidden | scroll | visible
Значения
- visible
- Отображается все содержание элемента, даже за пределами установленной ширины.
- hidden
- Отображается только область внутри элемента, остальное будет скрыто.
- scroll
- Всегда добавляется горизонтальная полоса прокрутки.
- auto
- В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.
Пример
HTML5CSS 2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow-x</title>
<style>
.layer {
overflow-x: scroll; /* Добавляем полосу прокрутки */
width: 300px; /* Ширина блока */
height: 150px; /* Высота блока */
padding: 5px; /* Поля вокруг текста */
border: solid 1px black; /* Параметры рамки */
white-space: nowrap; /* Запрещаем перенос строк */
}
</style>
</head>
<body>
<div>
<h3>Duis te feugifacilisi</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-x
Объектная модель
[window.]document.getElementById(«elementID»).style.overflowX
overflow-y | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.5+ | 3.0+ | 1.5+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | visible |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-box/#overflow-y |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.
Синтаксис
overflow-y: auto | hidden | scroll | visible
Значения
- visible
- Отображается все содержание элемента, даже за пределами установленной высоты.
- hidden
- Отображается только область внутри элемента, остальное будет скрыто.
- scroll
- Всегда добавляется вертикальная полоса прокрутки.
- auto
- В зависимости от браузера. В основном, вертикальная полоса прокрутки добавляется только при необходимости.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow-y</title>
<style>
body {
overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */
}
.layer {
width: 300px; /* Ширина блока */
height: 150px; /* Высота блока */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
<h3>Duis te feugifacilisi</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-y
Объектная модель
[window.]document.getElementById(«elementID»).style.overflowY
Правая граница CSS не работает внутри Div с прокруткой переполнения
РешениеПоля — это перемещение элемента из обертки, а не расширение оболочки наружу.
Это поведение согласуется с указанием a widthв дополнение к горизонтали в marginлюбом месте документа. Чтобы разбить его, рассмотрим следующий фрагмент, в котором я специфицирую оболочку без overflowсвойства, и marginне расширяет элемент оболочки.
body {
padding: 20px;
}
.outer {
width: 400px;
border: 1px solid black;
}
.inner {
width: 400px;
height: 40px;
margin: 0 20px;
background: grey;
}<div>
<div>
</div>
</div>Как вы можете видеть, marginэто не приводило к увеличению размера обертки, элемент просто продолжал переполняться. Это поведение описано в разделе «Модель форматирования в формате Visual», описанное в спецификации CSS 2.1.
Выдержка из раздела « Блок-уровень, незаменяемые элементы в нормальном потоке » раздела « Детали модели форматирования форматирования »:
Среди используемых значений других свойств должны быть следующие ограничения:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = ширина содержащего блока
[…]
Если все вышеперечисленное имеет вычисленное значение, отличное от «auto», значения считаются «чрезмерными», а одно из используемых значений должно отличаться от его вычисленного значения. Если свойство «direction» содержащего блока имеет значение «ltr», указанное значение «margin-right» игнорируется, и значение вычисляется так, чтобы сделать равенство true. Если значение «direction» равно «rtl», это происходит вместо «margin-left».
Это отрывок довольно плотный, так просто, давайте игнорировать ширину borderи padding, оба из которых 0, оставив нас width, margin-leftи margin-right.
Теперь, поскольку у вас есть фиксированное значение widthи значения для margin-leftи margin-right, значения «чрезмерно ограничены». Теперь в нашем примере, так как направление ltrпо умолчанию, margin-rightоно вынуждено компенсировать.
Чтобы увидеть влияние направления, давайте попробуем добавить dir="rtl"атрибут к элементу обертки.
body {
padding: 20px;
}
.outer {
width: 400px;
border: 1px solid black;
}
.inner {
width: 400px;
height: 40px;
margin: 0 20px;
background: grey;
}<div dir="rtl">
<div>
</div>
</div>Теперь элемент переполняется влево. Посмотрим, имеет ли этот dir="rtl"атрибут тот же эффект на ваш overflow: scrollпример.
#outer {
border: 1px solid #00F;
width: 200px;
height: 100px;
overflow: scroll;
}
#inner {
border: 1px solid #F0F;
margin: 25px;
width: 400px;
height: 200px;
}<div dir="rtl">
<div>
</div>
</div>Да, да. Граница теперь отсутствует слева, а не справа.
В основном потому, что спецификация не говорит об этом. Давайте рассмотрим спецификацию CSS 2 для overflowсвойства.
Выдержка из раздела « Переполнение и обрезка » в « Визуальных эффектах »:
Всякий раз, когда происходит переполнение, свойство «переполнения» указывает, привязано ли поле к его краю заполнения, и если да, то предоставляется ли механизм прокрутки для доступа к любому обрезанному контенту.
Посмотрите, как конкретно говорится «обрезанный контент». Для объяснения «содержимого», давайте ссылаться на следующий рисунок из спецификации CSS 2.
Графика из раздела « Размеры коробки » в « Box model »:
Как мы видим, marginон отделен от content. Однако на данном этапе стоит заметить, что в область прокрутки включены дополнения и границы, поэтому, когда спецификация говорит «контент», это, скорее всего, относится к пограничному блоку или, по крайней мере, похоже, как это интерпретируется ,
В принципе, поля inline-blockдействуют по- разному на элементы, потому что они являются уровнем контента, а не блочным уровнем, и у них нет понятия «чрезмерно ограничено».