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

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

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

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

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

Швидка пам'ятка про браузерах

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

Якщо вірити цим цифрам, для стилів прокрутки має бути дуже світле майбутнє!

Крок 1. Проста сторінка з смугами прокрутки

Перш ніж ми перейдемо до теми стилів прокрутки з CSS, нам потрібна функціональна демонстрація; сторінка з смугами прокрутки. Смуги прокрутки можна побачити, якщо:

Вміст більше видимої області вікна (праворуч з'явиться смуга прокрутки).
textarea містить досить тексту, щоб з'являлися смуги прокрутки.
iframe використовується для відображення іншої сторінки.
Елемент div або будь-який інший елемент блоку має свій overflow набір властивостей.

Заради демонстрації ми розглянемо останній варіант. Ось моя початкова розмітка:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.

Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.

Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.

Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.

</div>

Це просто div з великою кількістю фіктивного контенту. І початковий CSS, який встановлює деякі фіксовані розміри і запускає горизонтальну і вертикальну смуги прокрутки:

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

Ви повинні побачити щось схоже на це:

Крок 2. Початок роботи з браузерами Webkit

Деякий час назад (several years) CSS Pseudo Elements були представлені в браузерах Webkit для вказівки смуги прокрутки, надаючи можливість стилізувати сторінку відповідно до вашої темою.

Давайте придумаємо щось, використовуючи префікси -webkit- і webkit у властивостях. Майте на увазі, що я дотримуюся тільки основних властивостей CSS для зручності розуміння, з поясненнями в коментарях.

	::-webkit-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */

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

А тепер про деякі інші псевдоелементи:

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

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

Вгадай, що це? Internet Explorer має власну стилістику прокрутки!

Правильно - насправді IE був першим браузером, який підтримував стиль смуг прокрутки через CSS. Це було ще в дні IE 5.5, але змінити можна було тільки колір.

Ці властивості можна використовувати і сьогодні; погляньте на нього в IE 9 для демонстрації:

  body {
      scrollbar-face-color: #b46868;
  }

Подивіться, як це буде виглядати:

Крок 3. Відступ для браузерів Non-Webkit

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

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

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

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

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

Ось скріншот того, що ви побачите в Firefox:

Висновок

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

Сподіваюся, вам сподобався цей швидкий рада, і я з нетерпінням чекаю того, що ви зробите з смугами прокрутки в ваших дизайнерських роботах!

Додаткові ресурси

Custom Scrollbars in WebKit by Chris Coyier
Styling Scrollbars on webkit.org

Настроюються смужки прокрутки на 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. У нього є багато варіантів настройки. Можна налаштувати колір, ефекти, прокрутку, смугу і багато іншого.

3. Awesome Custom Scrollbar

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

4. DZS Scroller

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

5. CSS3 Scrollbar Styles

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