Главная > Браузеры, CSS/Style Sheets > Собственные скроллинги в браузерах семейства WebKit
Собственные скроллинги в браузерах семейства WebKit22 мая 2011, 13:45. Разместил: Mysterious Master |
Ранее, во времена Internet Explorer версии эдак 5.5, мы могли оформлять скроллинг страницы посредством незатейливых CSS-параметров, типа scrollbar-base-color. Далее данное «окошко» к стилю было закрыто. Сегодня же мы снова можем оформлять скроллинги, но на этот раз это возможно уже в браузерах семейства WebKit. Теперь этот процесс стал немного лучше, так как все параметры состоят из префиксных вендоров (например, -webkit-scrollbar), а также используется «Shadow DOM». Это было доступно уже несколько лет тому. Дэвид Хьёт (David Hyatt) еще в начале 2009 года публиковал примеры страниц с возможными оформлениями скроллинга. Плюсы Отдельные части Здесь у нас псевдо-элементы по отдельности. Отдельные части скроллинга.
Различные положения Здесь также есть селекторы псевдо-классов. Они позволяют нам более тщательно разделять и отбирать части скроллинга. Например, когда полоса прокрутки находится в разных местах.
Эту часть мы позаимствуем с записи в блоге Дэвида, так как вряд ли здесь что-то можно объяснить лучше, чем это сделал он: :horizontal – псевдо-класс горизонтальной прокрутки применяется к любой части скроллинга с горизонтальной ориентацией. :vertical – вертикальный псевдо-класс прокрутки применяется к любой части скроллинга с вертикальной ориентацией. :decrement – данный псевдо-класс применяется к кнопкам и частям дорожки. Он определяет, будет ли кнопка на скроллинге сокращать видимую область при использовании (например, верхняя стрелка на вертикальном скроллинге, левая стрелка на горизонтальном скроллинге). :increment – данный псевдо-класс применяется к кнопкам и частям дорожки. Он указывает, будет ли кнопка на скроллинге расширять видимую область при использовании (например, нижняя стрелка на вертикальном скроллинге, правая стрелка на горизонтальном скроллинге). :start – данный псевдо-класс применяется к кнопкам и частям дорожки. Он указывает на отображение объекта до миниатюры. :end – данный псевдо-класс применяется к кнопкам и частям дорожки. Он указывает на отображения объекта после миниатюры. :double-button – псевдо-класс двойной кнопки применяется к кнопкам и частям дорожки. Он используется для определения того, входит ли кнопка в пару кнопок, расположенных в конце скроллинга. Для частей дорожки этот класс указывается, содержит ли дорожка в себе пару кнопок. :single-button – этот класс применяется применяется к кнопкам и частям дорожки. Он использования для определения, является ли отдельной кнопкой та, что расположена в конце скроллинга. Для частей дорожки этот класс определяет, примыкает ли дорожка к одной отдельной кнопке. :no-button – применяется к частям дорожки и указывает на то, доходит ли дорожка до конца скроллинга и есть ли там на конце кнопка. :corner-present – применяется ко всему скроллингу и указывает на наличие угла скроллинга. :window-inactive – применяется ко всему скроллингу и указывает на активность окна, которое содержит скроллинг. (В будущем будет представлен новый стандартный псевдо-класс, применимый ко всему контенту на странице). Теперь всё вместе Эти псевдо-элементы и селекторы псевдо-классов работают все вместе. Вот несколько примеров:
Очень простой пример Для того, чтобы сделать действительно простой скроллинг, нам нужен такой код:
Где мы просто воспользуемся div’ом с вертикальным тектом: В мире Посмотрите на эти различные привлекательные скроллинги в блоге Maxvoltar от Тима Ван Дамма (Tim Van Damme): Здесь удивляет то, что скроллинг находится в теле документа, т.е., скроллинг не привязан к верху, низу или правому краю окна браузера, как это видно в случае со стандартными скроллингами. Мы сделали тестовую страницу с копируемым кодом для того, чтобы вы могли добиться того же эффекта: Посмотреть демо На сайте Forrst используется скроллинг на отрывках кода, что тоже вполне привлекательно. Вернуться назад |