Полоса прокрутки css: Как стилизовать или убрать полосу прокрутки — CSS скроллбар — Active-Vision

Полоса прокрутки css

Всем привет и сегодня мы рассмотрим псевдоселекторы с помощью которых сможем осуществлять стилизацию скрола. Сразу оговорюсь что данные псевдоселекторы работают только с семейством webkit, то есть с такими браузерами как google, opera, safari и т. п. Для той же mozilla или IE придется найти другие решения.

Итак, поехали! Полоса прокрутки он же скрол на вашем сайте могут смотреться не всегда красиво. Поэтому здесь у нас есть два варианта либо убрать отображение полосы прокрутки, либо стилизовать ее под ваш дизайн.

Давайте рассмотрим как убрать полосу прокрутки. Делается это очень просто:

::-webkit-scrollbar{
    width: 0px;
}

Здесь мы просто задаем ширину полосы прокрутки. В нашем случае мы выставили значение 0px. В результате чего полоса прокрутки просто не будет отображаться.

Причем заметьте. Даже если мы поставим значение не 0px, а допустим 5px.

::-webkit-scrollbar{
    width: 5px;

}

Полоса прокрутки все равно не будет отображаться. Почему? Да потому что после использования данного псевдоселектора (-webkit-scrollbar), предыдущие стили скрола автоматически сбрасываются. И мы можем писать новые.

Например, теперь мы можем задать определенный фон полосе прокрутки.

::-webkit-scrollbar{
    width: 5px;
    background:gray;
}

С помощью свойства background мы задали серый цвет нашей полосе прокрутки. Однако самого ползунка мы не видим. Нам необходимо прописать для него стили в отдельном псевдоселекторе:

::-webkit-scrollbar-thumb {
    background-color:yellow;
}

Мы установили в качестве фона ползунка желтый цвет.

То есть с помощью псевдоселектора -webkit-scrollbar-thumb можно стилизовать ползунок полосы прокрутки.

Теперь для стилизации полосы прокрутки нам достаточно играться со свойствами и значениями псевдоселекторов -webkit-scrollbar и -webkit-scrollbar-thumb.

К примеру, можно скруглить острые углы скролов с помощью свойства border-radius:

::-webkit-scrollbar{
    width: 5px;
    background:gray;
    border-radius: 5px;
}


::-webkit-scrollbar-thumb {
    background-color:yellow;
   border-radius: 5px;
} 

или в качестве фона полосы прокрутки, ползунка задать картинки

::-webkit-scrollbar{
    width: 5px;
    background:url(image1.jpg) no-repeat;        
    border-radius: 5px;
}


::-webkit-scrollbar-thumb {
    background:url(image2.jpg) no-repeat;
    border-radius: 5px;
}

В общем теперь все в ваших рукак! Включайте воображение и вперед.

На этом дорогие друзья данная статья подошла к концу. Надеюсь она была для вас полезна.

Я с вами прощаюсь! Желаю удачи и успехов! Пока!

Как сделать полосу прокрутки CSS

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

overflow : auto;
overflow : scroll;
overflow : visible;
overflow : hidden;
overflow : inherit;

auto – автоматический параметр который добавляет полосы прокрутки только по необходимости.

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;
}

Как настроить полосу прокрутки браузера с помощью (WebKit) CSS

Полоса прокрутки в браузере, вероятно, единственная вещь в окне, которая не соответствует стилю вашего сайта, если вы ищете, как ее настроить, верно?

Однако настройка полосы прокрутки — задача не из легких. Меньше, не только с CSS, но и не невозможно. Google Chrome представил -webkit-scrollbar Селектор в CSS, который позволяет вам с чистой CSS настроить полосу прокрутки, как вы хотите.

Браузеры, основанные на webkit, позволяют использовать следующие селекторы для применения стиля к полосе прокрутки:

::-webkit-scrollbar {
/*Sel 1 -Properties*/
}
::-webkit-scrollbar-button{
/*Sel 2 -Properties*/
}
::-webkit-scrollbar-track{
/*Sel 3 -Properties*/
}
::-webkit-scrollbar-track-piece{
/*Sel 4 -Properties*/
}
::-webkit-scrollbar-thumb{
/*Sel 5 -Properties*/
}
::-webkit-scrollbar-corner{
/*Sel 6 -Properties*/
}
::-webkit-resizer{
/*Sel 7 -Properties*/
}

Смотрите каждый селектор как часть прокручиваемого div:

И каждый селектор имеет разные состояния (псевдоселекторы), как показано в следующем примере:

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
/**
* when the track piece is on the start
*/
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
/* When the thumb is in the vertical orientation*/
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: black;
}

Каждое состояние описано в следующей таблице:

:horizontal	Горизонтальный псевдокласс применяется ко всем элементам полосы прокрутки, имеющим горизонтальную ориентацию.
:vertical	Вертикальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют вертикальную ориентацию.
:decrement	Псевдокласс декремента применяется к кнопкам и фрагментам дорожек. Он указывает, будет ли кнопка или элемент дорожки уменьшать положение вида при использовании (например, вверх по вертикальной полосе прокрутки, влево по горизонтальной полосе прокрутки).
:increment	Псевдокласс приращения применяется к кнопкам и фрагментам дорожки. Он указывает, будет ли кнопка или элемент дорожки увеличивать позицию вида при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
:start	Начальный псевдокласс применяется к кнопкам и фрагментам дорожки. Указывает, находится ли объект перед большим пальцем.
:end	Конечный псевдокласс применяется к кнопкам и фрагментам трека. Указывает, находится ли объект после большого пальца.
:double-button	Псевдокласс с двумя кнопками применяется к кнопкам и дорожкам. Он используется для определения того, является ли кнопка частью пары кнопок, которые находятся на одном конце полосы прокрутки. Для фрагментов дорожки указывает, упирается ли элемент дорожки в пару кнопок.
:single-button	Псевдокласс с одной кнопкой применяется к кнопкам и фрагментам дорожек. Он используется для определения того, находится ли кнопка в конце полосы прокрутки. Для фрагментов дорожек указывает, примыкает ли фрагмент дорожки к одной кнопке.
:no-button	Применяется к фрагментам дорожки и указывает, проходит ли фрагмент дорожки к краю полосы прокрутки, т. Е. На этом конце дорожки нет кнопки.
:corner-present	Применяется ко всем элементам полосы прокрутки и указывает, присутствует ли угол полосы прокрутки.
:window-inactive	Применяется ко всем частям полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки. (В последние ночи этот псевдокласс теперь применяется и к :: selection. Мы планируем расширить его для работы с любым контентом и предложить его в качестве нового стандартного псевдокласса.

Поиграйте со следующей скрипкой:

Или посмотрите более сложный пример на следующей странице:

Как видите, эта функция очень перспективна и интересна. Попробуйте объединить множество селекторов и создайте собственную классную полосу прокрутки в Google Chrome!

Кросс-браузер

До даты только Google Chrome поддерживает стили с использованием CSS. Однако это еще не конец истории, так как вы все еще можете выполнить настройку полосы прокрутки с помощью javascript, используя плагин в каждом браузере.

CSS — полосы прокрутки — CoderLessons.com

Возможен случай, когда содержимое элемента может быть больше, чем выделенное ему пространство. Например, данные свойства width и height не дают достаточно места для размещения содержимого элемента.

CSS предоставляет свойство overflow, которое сообщает браузеру, что делать, если содержимое блока больше, чем сам блок. Это свойство может принимать одно из следующих значений:

видимый

Позволяет содержимому переполнять границы содержащего его элемента.

скрытый

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

свиток

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

авто

Назначение такое же, как прокрутка, но полоса прокрутки будет отображаться только в том случае, если содержимое переполняется.

Вот пример —

Live Demo

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box.  
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html> 

Это даст следующий результат —

Изменение полосы прокрутки css | Gadget-apple.ru

Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar . К сожалению, оно работает только в браузерах на движке WebKit . Но поддерживается jQuery почти во всех обозревателях. Давайте выполним стилизацию скроллбара.

Данное свойство поддерживается версиями Google Chrome для настольных компьютеров и мобильных устройств, Apple Safari , Flock , OmniWeb . Даже если вы создаете дизайн только для этих браузеров без использования jQuery , то сможете охватить только 72% пользователей интернета. Но если у вас нет аллергии на программирование, то можете быть уверены, что каждый ваш посетитель увидит красиво стилизованный скроллбар.

Стилизация скроллбара

Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe , элементы div и поле ввода текста. В iframe и текстовой области окна браузеры автоматически добавляют полосу прокрутки в нижней части, когда содержимое выходит за пределы видимой области. Тем не менее, в контейнерах необходимо предоставлять дополнительную информацию для браузеров. Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:

Это код scrolling CSS покажет полосу прокрутки такой (справа)

Использование псевдоэлементов CSS для настройки скроллбара

IE5. 5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color , можно были изменить цвет полос прокрутки. Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере. Поскольку это свойство по-прежнему поддерживается в Internet Explorer , его можно использовать для пользователей, предпочитающих этот браузер.

Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.

1. ::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS . Обратите внимание, что при этом будут выбраны все полосы прокрутки, присутствующие на странице. Если нужно настроить скроллбар для определенного элемента, необходимо применить это свойство к конкретному элементу:

1. ::-webkit-scrollbar-thumb — Это ползунок скроллбара ( чем вы держите и прокручиваете страницу ). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:

1. ::-webkit-scrollbar-track — позволяет настроить трек скроллбара ( путь движения ползунка ). Синтаксис псевдоэлемента для CSS scroll :

1. ::-webkit-scrollbar-button — разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов ( или левого и правого для горизонтальных полос прокрутки ):

1. ::-webkit-scrollbar-corner — позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:

Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS .

Настройка скроллбара с помощью Jquery

Если вам нравится программирование front-end , вы можете использовать Jquery-плагин JScrollPane . Он довольно прост в использовании. После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки. Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем.

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

Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane , нужно редактировать стили соответствующих элементов:

Вывод

Пользовательские скроллбары больше не являются редкостью. Вы найдете их на большинстве сайтов и блогов. А с JScrollPane стало гораздо проще создавать и отображать стилизованные полосы прокрутки во всех браузерах. Надеюсь, этот урок оказался для вас полезным.

Данная публикация представляет собой перевод статьи « Scrollbar styling using CSS and Jquery » , подготовленной дружной командой проекта Интернет-технологии. ру

Дата публикации: 2018−12−24

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров.

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью Sass@mixin.

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

Пользовательские полосы прокрутки встречаются крайне редко, и это в основном связано с тем, что полосы прокрутки являются одним из оставшихся участков в Интернете, которые в значительной степени не установлены (я смотрю на вас, элемент выбора даты). Вы можете использовать JavaScript, чтобы создать свою собственную полосу прокрутки, но это может быть достаточно затратно и подвержено ошибкам. В этой статье мы будем использовать некоторые нетрадиционные матрицы CSS для создания пользовательского скроллера, который во время прокрутки не требует JavaScript, только некоторый установленный код.

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

Различные состояния

Это псевдоселекторы, они позволяют точнее выбирать разные части полосы прокрутки, когда они находятся в различных состояниях.

Я украду целый раздел с поста Дэвида из блога WebKit, потому что он хорошо объясняет каждую часть.

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).

:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

Очень простой пример

Чтобы сделать действительно простой пользовательский скроллбар мы добавим это.

И получим следующий результат на простом

В диких условиях

Отмечу очень тонкий и симпатичный скроллбар в блоге Тима Ван Дамма Maxvoltar (сайт Тима больше не использует этот дизайн).

Особенно приятно, что скроллбар применяется к элементу body, но полосы прокрутки не прилипают к верхнему, нижнему или правому краю окна браузера, где они обычно находятся. Я сделал тестовую страницу скопировав и вставив код для достижения аналогичного эффекта.

На Forrst используются пользовательские скроллбары для фрагментов кода, которые также довольно хороши. Они визуально менее насыщенные, из-за чего не очень сочетаются с подсветкой кода.

НАШ САЙТ РЕКОМЕНДУЕТ:

Изменяем вид полосы прокрутки в браузере

В разных операционных системах по умолчанию разные полосы прокрутки для браузеров. Но к счастью можно задавать свои собственные цвета для данного элемента, чтобы выделить свой сайт среди остальных. Как-то раз я был на одном английском сайте, и мне очень понравилось как гармонируют цвета сайта с цветом полосы прокрутки. Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.

Интересный эффект о котором я писал раньше: Перетаскивание блоков используя jQuery.

В данной статье мы рассмотрим jQuery плагины, позволяющие сделать нестандартную полосу прокрутки в браузере, так как CSS свойства поддерживаются не всеми браузерами.

Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.

1. NiceScroll.js

NiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.

2. NanoScroll

Данный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.

3. jQuery custom content scroller

Плагин jQuery для стилизации полосы прокрутки в браузере с помощью CSS.

4. Tiny Scrollbar

Легкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

5. Scrollbar Visibility

Легкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

6. jScrollPane

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

7. Scrollbar Paper

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

8. jQuery Scrollbars v2

Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.

9. Vertical scrollbar

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

Вывод

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

  .scrollable-element {
  цвет полосы прокрутки: красный желтый;
}  

  .scrollable-element {
  цвет полосы прокрутки: темный;
}  

  цвет полосы прокрутки: авто | темный | свет | <цвет>;  

: not (.none): not (.double-start) :: - webkit-scrollbar-track-piece: vertical: end: single-button,
:нет(.none): not (.double-start) :: - webkit-scrollbar-track-piece: vertical: end: double-button,
.single :: - webkit-scrollbar-track-piece: vertical: end,
.double-end :: - webkit-scrollbar-track-piece: vertical: end,
.double-both :: - webkit-scrollbar-track-piece: vertical: end {
    нижнее поле: -6 пикселей;
} 

 / * Включить полосу прокрутки 13x13 * /
:: - webkit-scrollbar {
    ширина: 13 пикселей;
    высота: 13 пикселей;
}

:: - webkit-scrollbar-button: vertical {
    цвет фона: красный;
    граница: синий пунктир 1px;
}

/ * Включаем одну кнопку вверху вверх и вниз внизу * /
:: - webkit-scrollbar-button: начало: уменьшение,
:: - webkit-scrollbar-button: end: increment {
    дисплей: блок;
}

/ * Выключаем нижнюю часть вверху и верхнюю часть внизу * /
:: - webkit-scrollbar-button: вертикальный: начало: приращение,
:: - webkit-scrollbar-button: vertical: end: декремент {
    дисплей: нет;
}

/ * Поместите кнопку прокрутки вниз внизу * /
:: - webkit-scrollbar-button: vertical: increment {
    цвет фона: черный;
    граница: синий пунктир 1px;
}

/ * Поместите кнопку прокрутки вверх вверх * /
:: - webkit-scrollbar-button: vertical: декремент {
    цвет фона: фиолетовый;
    граница: синий пунктир 1px;
}

:: - webkit-scrollbar-track: vertical {
    цвет фона: синий;
    граница: розовая пунктирная 1px;
}

/ * Верхняя область над большим пальцем и под кнопкой вверх * /
:: - webkit-scrollbar-track-piece: vertical: start {
    граница: 1px solid # 000;
}

/ * Нижняя область под большим пальцем и кнопкой вниз * /
:: - webkit-scrollbar-track-piece: vertical: end {
    граница: розовая пунктирная 1px;
}

/ * Отслеживание снизу и сверху * /
:: - webkit-scrollbar-track-piece {
    цвет фона: зеленый;
}

/ * Сам большой палец * /
:: - webkit-scrollbar-thumb: vertical {
    высота: 50 пикселей;
    цвет фона: желтый;
}

/* Угол */
:: - webkit-scrollbar-corner: vertical {
    цвет фона: черный;
}

/ * Изменение размера * /
:: - webkit-scrollbar-resizer: vertical {
    цвет фона: серый;
} 

 / * Включите одну кнопку вверху вверху и вниз внизу * /
:: - webkit-scrollbar-button: начало: уменьшение,
:: - webkit-scrollbar-button: end: increment {
    дисплей: блок;
}

/ * Выключаем нижнюю часть вверху и верхнюю часть внизу * /
:: - webkit-scrollbar-button: начало: приращение,
:: - webkit-scrollbar-button: end: декремент {
    дисплей: нет;
}

/ * Поместите кнопку прокрутки вниз внизу * /
:: - webkit-scrollbar-button: end: increment {
    background-image: url (images / scroll_cntrl_dwn.png);
}

/ * Поместите кнопку прокрутки вверх вверх * /
:: - webkit-scrollbar-button: начало: декремент {
    фоновое изображение: url (images / scroll_cntrl_up.png);
} 

 / * Верхняя область над большим пальцем и под кнопкой вверх * /
:: - webkit-scrollbar-track-piece: vertical: start {
    фоновое изображение: url (images / scroll_gutter_top.png), url (images / scroll_gutter_mid.png);
    фон-повтор: нет-повтор, повтор-у;
}

/ * Нижняя область под большим пальцем и кнопкой вниз * /
:: - webkit-scrollbar-track-piece: vertical: end {
    background-image: url (images / scroll_gutter_btm.png), url (images / scroll_gutter_mid.png);
    фон-повтор: нет-повтор, повтор-у;
    background-position: нижний левый, 0 0;
} 

 / * Сам большой палец * /
:: - webkit-scrollbar-thumb: vertical {
    высота: 56 пикселей;
    -webkit-border-image: url (images / scroll_thumb.png) 8 0 8 0 растянуть;
    ширина границы: 8 0 8 0;
}