Главная > Браузеры, CSS/Style Sheets > Собственные скроллинги в браузерах семейства WebKit

Собственные скроллинги в браузерах семейства WebKit


22 мая 2011, 13:45. Разместил: Mysterious Master
Ранее, во времена Internet Explorer версии эдак 5.5, мы могли оформлять скроллинг страницы посредством незатейливых CSS-параметров, типа scrollbar-base-color. Далее данное «окошко» к стилю было закрыто.

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

Плюсы

Отдельные части

Здесь у нас псевдо-элементы по отдельности. Отдельные части скроллинга.

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


Собственные скроллинги в браузерах семейства WebKit

Различные положения

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

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive


Эту часть мы позаимствуем с записи в блоге Дэвида, так как вряд ли здесь что-то можно объяснить лучше, чем это сделал он:

:horizontal – псевдо-класс горизонтальной прокрутки применяется к любой части скроллинга с горизонтальной ориентацией.

:vertical – вертикальный псевдо-класс прокрутки применяется к любой части скроллинга с вертикальной ориентацией.

:decrement – данный псевдо-класс применяется к кнопкам и частям дорожки. Он определяет, будет ли кнопка на скроллинге сокращать видимую область при использовании (например, верхняя стрелка на вертикальном скроллинге, левая стрелка на горизонтальном скроллинге).

:increment – данный псевдо-класс применяется к кнопкам и частям дорожки. Он указывает, будет ли кнопка на скроллинге расширять видимую область при использовании (например, нижняя стрелка на вертикальном скроллинге, правая стрелка на горизонтальном скроллинге).

:start – данный псевдо-класс применяется к кнопкам и частям дорожки. Он указывает на отображение объекта до миниатюры.

:end – данный псевдо-класс применяется к кнопкам и частям дорожки. Он указывает на отображения объекта после миниатюры.

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

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

:no-button – применяется к частям дорожки и указывает на то, доходит ли дорожка до конца скроллинга и есть ли там на конце кнопка.

:corner-present – применяется ко всему скроллингу и указывает на наличие угла скроллинга.

:window-inactive – применяется ко всему скроллингу и указывает на активность окна, которое содержит скроллинг. (В будущем будет представлен новый стандартный псевдо-класс, применимый ко всему контенту на странице).

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

Эти псевдо-элементы и селекторы псевдо-классов работают все вместе. Вот несколько примеров:

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}


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

Для того, чтобы сделать действительно простой скроллинг, нам нужен такой код:

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

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}


Где мы просто воспользуемся div’ом с вертикальным тектом:

Собственные скроллинги в браузерах семейства WebKit

В мире

Посмотрите на эти различные привлекательные скроллинги в блоге Maxvoltar от Тима Ван Дамма (Tim Van Damme):

Собственные скроллинги в браузерах семейства WebKit

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

Посмотреть демо

На сайте Forrst используется скроллинг на отрывках кода, что тоже вполне привлекательно.

Собственные скроллинги в браузерах семейства WebKit

Вернуться назад