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

Швидкий рада: приведення смуг прокрутки у відповідність з вашим UI Design

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

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

Шукаєте ярлик?

Якщо вам потрібна допомога в розробці певного компонента вашого сайту, швидше отримати її від професіонала. Envato має фахівців, готових допомогти з оновленням або налаштуванням всіх видів веб-компонентів.

Web 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 plugin
Lazybars - потужний гнучкий плагін прокрутки jQuery

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress" - це плагін, який може створювати для користувача смугу прокрутки на сайтах WordPress. У нього є багато варіантів настройки. Можна налаштувати колір, ефекти, прокрутку, смугу і багато іншого.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

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

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller надає смугу прокрутки для вашого сайту, яку ви легко можете налаштувати за допомогою CSS, якщо трьох виділених скінів недостатньо. Він поставляється з розширеними функціональними можливостями, такими як прокрутка при наведенні або вицвітання при відпуску миші. І це працює на iPhone / iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

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

CSS3 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.