Для создания блока фиксированного размера с возможностью прокрутки по горизонтали и вертикали необходимо использовать свойство overflow.
Overflow может принимать следующие значения:
visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
hidden: Контент обрезается, без предоставления прокрутки.
scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
Пример текста, который будет в блоке с полосами прокрути - как горизонтальной так и вертикальной. Для того что бы ими можно было воспользоваться, добавим д____л____и____н____н____о_____е слово.
div border:1pxsolid#000;width:200px;height:50px;/* Включаем отображение полос прокрутки по горизонтали и по вертикали */overflow:auto;padding:20px;>
1. Что такое overflow в CSS? 2. Свойства и значения overflow 3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS 4. Пример div блока с прокруткой
В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.
О полезном свойстве overflow
Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.
overflow-x — отвечает за отображением содержания блочного элемента по горизонтали. overflow-y — отвечает за отображением содержания блочного элемента по вертикали.
.prokrutka overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */ >
Свойства и значения overflow
visible — отображается все содержание элемента, даже за пределами установленной ширины. hidden — отображается только область внутри элемента, остальное скрыто. scroll — принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки. auto — автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.
Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности
.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
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно. Посмотреть работу скрипта на примере ниже.
Демонстрация Скачать исходники Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.
Как стилизовать или убрать полосу прокрутки — CSS скроллбар
Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.
Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.
Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.
1 Как убрать полосу прокрутки CSS
Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:
CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; }
2 Как изменить скроллбар CSS
Теперь давайте рассмотрим базовую структуру полосы прокрутки:
-webkit-scrollbar состоит различных псевдо-элементов.
::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.
3 CSS стили
Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.
Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .
Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.
Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.