Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Быстрый совет: приведение полос прокрутки в соответствие с вашим UI Design

by
Read Time:8 minsLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

Этот совет поможет вам улучшить внешний вид полос прокрутки, в соответствии с дизайном пользовательского интерфейса. Мы посмотрим, что предлагают нам браузеры WebKit с точки зрения CSS, плюс мы будем использовать резервную копию jQuery для обслуживания других браузеров.

Ищете ярлык?

Если вам нужна помощь в разработке определённого компонента вашего сайта, быстрее получить её от профессионала. Envato имеет специалистов, готовых помочь с обновлением или настройкой всех видов веб-компонентов.

Web component services on Envato StudioWeb component services on Envato StudioWeb component services on Envato Studio

Быстрая памятка о браузерах

Когда мы говорим о браузерах на базе Webkit, мы говорим о Apple Safari и Google Chrome. Вместе они в настоящее время занимают более 40% рынка настольных браузеров. Для планшетов iPad Apple всегда будет использовать Webkit независимо от того, какой браузер используется в компании. Google также добавил Chrome в свою ОС Android, и Chromebooks, конечно, основаны на Google Chrome.

Если верить этим цифрам, для стилей прокрутки должно быть очень светлое будущее!


Шаг 1. Простая страница с полосами прокрутки

Прежде чем мы перейдём к теме стилей прокрутки с CSS, нам нужна функциональная демонстрация; страница с полосами прокрутки. Полосы прокрутки можно увидеть, если:

  • Содержимое больше видимой области окна (справа появится полоса прокрутки).
  • textarea  содержит достаточно текста, чтобы появлялись полосы прокрутки.
  • iframe используется для отображения другой страницы..
  • Элемент div или любой другой элемент блока имеет свой overflow набор свойств.

Ради демонстрации мы рассмотрим последний вариант. Вот моя начальная разметка:

Это просто div с большим количеством фиктивного контента. И первоначальный CSS, который устанавливает некоторые фиксированные размеры и запускает горизонтальную и вертикальную полосы прокрутки:

Вы должны увидеть что-то похожее на это:


Шаг 2. Начало работы с браузерами Webkit

Некоторое время назад (several years) CSS Pseudo Elements были представлены в браузерах Webkit для указания полосы прокрутки, предоставляя возможность стилизовать страницу в соответствии с вашей темой.

Давайте придумаем что-нибудь, используя префиксы          -webkit- и webkit в свойствах. Имейте в виду, что я придерживаюсь только основных свойств CSS для удобства понимания, с объяснениями в комментариях.

Когда этот псевдоэлемент присутствует, WebKit отключит встроенный рендер прокрутки и просто использует информацию, предоставленную в CSS. - Surfin' Safari

А теперь о некоторых других псевдоэлементах:

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

Угадай, что это? Internet Explorer имеет собственную стилистику прокрутки!

Правильно - на самом деле IE был первым браузером, который поддерживал стиль полос прокрутки через CSS. Это было еще в дни IE 5.5, но изменить можно было только цвет.

Эти свойства можно использовать и сегодня; взгляните на него в IE 9 для демонстрации:

Посмотрите, как это будет выглядеть:


Шаг 3. Отступление для браузеров Non-Webkit

Достаточно о WebKit. Firefox, IE и Opera также могут присоединиться. Для них у нас есть хорошее решение в форме jScrollPane. Этот плагин jQuery разработан Kelvin Luck, и он будет нашим спасителем.

На веб-сайте Kelvin полно хороших примеров, но для простого использования нам нужно загрузить jQuery и jScrollPane файлы и реализовать их следующим образом:

Следуя нашей теме, давайте откроем jquery.jscrollpane.css и отредактируем следующие строки со значениями цвета (для повышения производительности вы можете поместить все стили в свои собственные файлы):

Вот скриншот того, что вы увидите в Firefox:


Заключение

Веб-приложения, такие как Gmail и Google+ (наряду со многими другими примерами) уже приняли идею и если этот импульс продолжится, возможно, Firefox и IE также предоставят свои собственные решения.

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


Дополнительные ресурсы

Настраиваемые полоски прокрутки на Envato Market

Если вы ищете готовое решение, Envato Market предлагает широкий выбор scrollbars, которые вы можете подключить к вашему сайту для достижения ряда эффектов. Вот некоторые из них:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

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

Используйте темы, связанные с Lazybars или создайте свои собственные с помощью простых CSS.

Lazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - мощный гибкий плагин прокрутки jQuery

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress”  - это плагин, который может создавать пользовательскую полосу прокрутки на сайтах WordPress. У него есть много вариантов настройки. Можно настроить цвет, эффекты, прокрутку, полосу и многое другое.

Fancy Scrollbar - WordPressFancy Scrollbar - WordPressFancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar - настраиваемый плагин jQuery для полосы прокрутки вашего сайта WordPress. С помощью этого плагина вы можете настроить свою полосу прокрутки веб-страницы, и встраивать пользовательскую полосу прокрутки по шорткоду в любом месте.

Awesome Custom ScrollbarAwesome Custom ScrollbarAwesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller предоставляет полосу прокрутки для вашего сайта, которую вы легко можете настроить с помощью CSS, если трёх выделенных скинов недостаточно. Он поставляется с расширенными функциональными возможностями, такими как прокрутка при наведении или выцветание при отпускании мыши. И это работает на iPhone / iPad.

DZS ScrollerDZS ScrollerDZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Легко использовать красивую и красочную полосу прокрутки CSS3 для вашего сайта. Просто вставьте в существующий файл CSS и наслаждайтесь новой CSS3 Scrollbar.

CSS3 Scrollbar StylesCSS3 Scrollbar StylesCSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.