Змінюємо вид смуги прокрутки в браузері. Частина 1

У різних операційних системах за замовчуванням різні смуги прокручування браузерів. Але на щастя можна задавати свої власні кольори для даного елемента, щоб виділити свій сайт серед інших. Якось раз я був на одному англійському сайті, і мені дуже сподобалося як гармонують кольори сайту з кольором смуги прокрутки. Тому якщо ви вирішили зробити колір прокрутки нестандартний, то переконаєтеся що він підходить по кольоровій гамі вашого сайту.

Цікавий ефект о якому я писав раніше: Перетягування блоків використовуючи jQuery.

У даній статті ми розглянемо jQuery плагіни, що дозволяють зробити нестандартну смугу прокрутки в браузері, так як CSS властивості підтримуються не всіма браузерами.

Приступимо до розгляду даних плагінів, які змінюють вигляд смуги прокрутки в браузері.

1. NiceScroll.js

NiceScroll є jQuery плагіном, який дозволяє створити смугу прокрутки схожу на iOS.

Подивитися прикладзавантажити

2. NanoScroll

Даний плагін дозволяє створити смугу прокрутки на вашому сайті як в Mac OS X.

Подивитися прикладзавантажити

3. jQuery custom content scroller

Плагін jQuery для стилізації смуги прокрутки в браузері за допомогою CSS.

Подивитися прикладзавантажити

4. Tiny Scrollbar

Легкий jQuery плагін написаний за допомогою jQuery бібліотеки, який додасть гарний вид прокрутки контенту і смуги прокрутки головного вікна браузера.

Подивитися прикладзавантажити

5. Scrollbar Visibility

Легкий плагін написаний за допомогою jQuery бібліотеки, який додасть гарний вид прокрутки контенту і смуги прокрутки головного вікна браузера.

Подивитися прикладзавантажити

6. jScrollPane

За допомогою даного плагіна також можна робити призначені для користувача смуги прокрутки, які працюють у всіх сучасних браузерах. Стилі можна змінювати за допомогою CSS файлу.

Відео: Стилізація смуги прокрутки

Подивитися прикладзавантажити

7. Scrollbar Paper

За допомогою даного плагіна можна надати стиль смузі прокрутки яка у браузера, але можна задати для вмісту фреймів всередині сторінки.

Подивитися прикладзавантажити

Відео: Стилізація select на jQuery (Частина 1 - підключення плагіна)

8. jQuery Scrollbars v2

Повністю настроюються смуги прокрутки, а також показує стандартні якщо javascript відключений в браузері.

Подивитися прикладзавантажити

Відео: Adobe Muse Уроки | 19. Як прибрати смугу прокрутки (2 способи)

9. Vertical scrollbar

Для даного плагіна необхідно фіксована висота контейнера, тому що смуга прокручування розташована праворуч за допомогою позиціонування.

Подивитися прикладзавантажити

висновок

Звичайно при використанні плагінів буде навантаження на сайт, але і виглядати буде смуга прокрутки однаково в усіх браузерах.

Відео: Стилізація select на jQuery (Частина 3 - Міняємо дизайн)

Успіхів!