Стилізація призначеного для користувача скроллбар за допомогою css і jquery, css
Напевно ви бачили сайти з оригінальними смугами прокрутки. Це досягається за допомогою нового CSS scroll властивості webKit-scrollbar. На жаль, воно працює тільки в браузерах на движку WebKit. Але підтримується jQuery майже у всіх браузерах. Давайте виконаємо стилізацію скроллбар.
Дана властивість підтримується версіями Google Chrome для настільних комп'ютерів і мобільних пристроїв, Apple Safari. Flock. OmniWeb. Навіть якщо ви створюєте дизайн тільки для цих браузерів без використання jQuery. то зможете охопити лише 72% користувачів інтернету. Але якщо у вас немає алергії на програмування, то можете бути впевнені, що кожен ваш відвідувач побачить красиво стилізований скроллбар.
стилізація скроллбар
Смуги прокрутки реалізовані там, де довжина контенту перевищує ширину вікна контейнера. Завдяки цьому ви отримуєте можливість стилізувати iframe. елементи div і поле введення тексту. У iframe і текстової області вікна браузери автоматично додають смугу прокрутки в нижній частині, коли вміст виходить за межі видимої області. Проте, в контейнерах необхідно надавати додаткову інформацію для браузерів. Установка властивості overflow значення scroll говорить браузерам про те, що потрібно виводити смуги прокрутки в разі переповнення вікна контентом:
Це код scrolling CSS покаже смугу прокрутки такий (праворуч)
Використання псевдоелементів CSS для настройки скроллбар
IE5.5 був першим браузером, що підтримує основні стилі для скролінгу. Використовуючи властивість scrollbar-face-color. можна було змінити колір смуг прокрутки. Хоча це і не додавало великої різноманітності, але все ж краще, ніж стандартна смуга прокрутки в браузері. Оскільки це властивість як і раніше підтримується в Internet Explorer. його можна використовувати для користувачів, що віддають перевагу цей браузер.
Для WebKit-браузерах в CSS існує безліч варіантів стилізації: зміна кольору і ширини смуги прокрутки, повзунків. Елементи скролінгу можна вибрати за допомогою наступних псевдоелементів.
- . webkit-scrollbar - дозволяє налаштувати ширину і колір смуги прокрутки. Коли цей псевдоелемент вказано, WebKit вимикає свій вбудований рендеринг скроллбар і використовує настройки, зазначені для div scroll CSS. Зверніть увагу, що при цьому будуть обрані всі смуги прокрутки, присутні на сторінці. Якщо потрібно налаштувати скроллбар для певного елемента, необхідно застосувати цю властивість до конкретного елементу:
- . -webkit-scrollbar-thumb - Це повзунок скроллбар (чим ви тримаєте і прокручуєте сторінку). Він може мати колір або використовувати градієнт в якості фону. Приклад реалізації:
- . -webkit-scrollbar-track - дозволяє налаштувати трек скроллбар (шлях руху повзунка). Синтаксис псевдоелемента для CSS scroll:
- . -webkit-scrollbar-button - розробники CSS3 не випускають з уваги маленькі кнопки на кінцях смуги прокрутки. Їх також можна налаштувати, так як вони допомагають, коли сторінка довга і скроллбар стає занадто маленьким для прокрутки. Це властивість стилю верхнього і нижнього кутів (або лівого і правого для горизонтальних смуг прокрутки):
- . -webkit-scrollbar-corner - дозволяє впоратися з ситуацією, коли з'являються обидві смуги прокрутки і перетинаються в кутку:
Ось кілька прикладів, які демонструють силу властивості scrolling CSS.
Налаштування скроллбар за допомогою Jquery
За допомогою цього плагіна ви можете створювати скролінг для всіх типів браузерів. Так що я б порадив вам скористатися ним, щоб заощадити час і охопити відразу всі браузери:
Якщо ви захочете змінити налаштування CSS scroll за замовчуванням, надані JScrollPane. потрібно редагувати стилі відповідних елементів:
Призначені для користувача скроллбар перестають бути рідкістю. Ви знайдете їх на більшості сайтів і блогів. А з JScrollPane стало набагато простіше створювати і відображати стилізовані смуги прокрутки у всіх браузерах. Сподіваюся, цей урок виявився для вас корисним.
Переклад статті "Scrollbar styling using CSS and Jquery" був підготовлений дружною командою проекту Сайтобудування від А до Я.