overflow

overflow

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi 
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.
 
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

[window.]document.getElementById(» elementID «).style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

• не поддерживает значение inherit ;
• относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .

• Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
• Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
• Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Источник

Как стилизовать или убрать полосу прокрутки — 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 состоит различных псевдо-элементов.

1. ::-webkit-scrollbar — это фон самого скроллбара.
2. ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
3. ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
4. ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; } 

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; } 

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; } 

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } 

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; } 

Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); } 

Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); } 

В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.

Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); } 

Источник

Как убрать полосу прокрутки с сайта, но оставить возможность прокрутки

Если Вы хотите убрать полосу прокрутки с сайта и оставить возможность прокручивания страницы, то эта короткая статья для Вас.

Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на css.

Пришлось более глубже копнуть, и на данный момент пришёл к выводу, что кроссбраузерного решения на css не существует.

В основном, все кроссбраузерные способы сводятся либо к изменению архитектурной конструкции HTML, либо же к использованию JavaScript.

Упорядочив информацию, привожу ниже в все три способа скрытия полосы прокрутки: на CSS, с помощью HTML конструкций и с помощью JavaScript.

1-ый способ (css):

Ключевой момент — использование псевдоэлемента -webkit-scrollbar с шириной равной нулю.

Конструкция HTML будет иметь следующий вид:

CSS стили будут иметь следующий вид:

.sposob-1 < width: 250px; height: 342px; margin: 0 25px; overflow-x: hidden; overflow-y: scroll; >.sposob-1-inside < width: 100%; margin: 0 0px; background: #008C00; >.sposob-1::-webkit-scrollbar

Первый способ скрытия полосы прокрутки будет работать только для браузеров на движке WebKit.

2-ой способ (HTML+CSS):

Ключевой момент — ширину внутреннего контейнера задаём больше на 20px относительно внешнего контейнера, что примерно равно ширине полосы прокрутки.

Конструкция HTML будет иметь следующий вид:

CSS стили будут иметь следующий вид:

.sposob-2 < width: 250px; height: 342px; margin: 0 25px; overflow: hidden; >.sposob-2-outside < width: 270px; height: 100%; padding-right: 0px; overflow-x: hidden; overflow-y: scroll; >.sposob-2-inside

Говоря о скрытии скроллбара с помощью HTML-конструкций необходимо донести читателю, что кроме вышеприведённого способа, в котором полоса прокрутки скрывается за счёт увеличения свойства width относительно внешнего контейнера, существуют и другие подходы. Это и увеличение горизонтальных отступов и изменение свойств позиционирования и возможно другие. Здесь уже как мысль развернётся.

3-ий способ (JavaScript):

Ключевой момент — с помощью js-скрипта задаём правый отступ (padding-Right) внутреннего контейнера, что бы увеличить его ширину для скрытия полосы прокрутки.

Конструкция HTML будет иметь следующий вид:

CSS стили будут иметь следующий вид:

JavaScript код будет следующим:

var parent = document.getElementById('spb-1'); var child = document.getElementById('spb-2'); child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";

Третий способ — это по сути второй, только в данном случае мы увеличиваем ширину внутреннего контейнера относительно внешнего за счёт задания правого внутреннего отступа (padding-Right) с помощью js-скрипта.

Источник