There is an English version of this article available.
У цій статті я розповім про те, як буквально за 10 хвилин за допомогою jScrollPane - бібліотеки для jQuery - ви зможете зробити нестандартну смугу прокрутки для свого сайту, а також як її стилізувати і налаштувати.
базові відомості
Рано чи пізно веб-дизайнер стикається з тим, що смуги прокрутки на сайті, який він створює, виглядають неорганічно (і кожен браузер відображає їх по-своєму). У багатьох випадках це не є проблемою, проте трапляються замовники, які звертають на цей момент пильну увагу і вимагають, щоб смуги прокрутки були пофарбовані в певний колір, мали, скажімо, закруглені краї і щоб стрілки (вгору-вниз, вліво-вправо) НЕ відображалися. Виникає просте запитання: як це зробити? Чи зможе нам допомогти в цьому випадку CSS? В принципі, багато років тому на деяких сайтах я зустрічав інструкції CSS, які дійсно перефарбовували смуги прокрутки, але працювало це тільки у всіма улюбленому браузері IE починаючи з версії 6, і в нашому випадку такий варіант не підходить. Все ж, якщо комусь цікаво, то реалізовувалося це приблизно так:
Досить поставити ширину і висоту, яка підходить під ваш випадок. Вийде щось в цьому роді:
Ось що вийшло в результаті:
Ура, спрацювало. Тепер залишилося лише застосувати необхідні стилі до нашої смузі прокрутки. Зробимо її в сірих тонах і більш вузькою (до речі, для jScrollPane існує преопределённая тема оформлення):
Налаштування jScrollPane
Ви можете помітити, що прокрутка за допомогою коліщатка мишки занадто повільна. Що ж, виправити це нескладно - jScrollPane дозволяє передавати безліч параметрів для налаштування (їх повний перелік можна знайти тут):
Швидкість прокрутки 70, на мій погляд, є оптимальною, але ви можете поекспериментувати самостійно (значення за замовчуванням - 10).
Ще один важливий параметр відповідає за те, чи буде наш блок з смугою прокрутки оновлюватися автоматично. В якому випадку це корисно? Наприклад, тоді, коли блок з прокруткою має не фіксовану ширину, а відносну (задану в процентах, em або rem). В цьому випадку якщо користувач буде змінювати розмір вікна, то наш блок буде змінювати ширину і потрібно правильно змінити смугу прокрутки. Це можна робити і за допомогою API, який доступний в jScrollPane (про це трохи пізніше), але простіше буде написати так:
В цьому випадку смуга прокрутки буде перевизначатися автоматично. Інший сценарій використання цього параметра - динамічне додавання вмісту в блок з прокруткою. Якщо автоматичного перевизначення немає, то при додаванні контенту смуга прокручування буде оновлена і доступ до нового вмісту можна буде перейти (він залишиться за межами блоку і буде невидимий) - властивість autoReinitialise дозволить уникнути цієї проблеми. Зверніть увагу, що за замовчуванням автоматичне перевизначення виконується дуже часто - кожні півсекунди. Якщо у вашому випадку досить буде оновлювати смугу прокрутки кожні, скажімо, 5 секунд, то необхідно передати ще один параметр autoReinitialiseDelay:
Значення задається в мілісекундах.
Також зверніть увагу, що якщо фокус встановлено на блоці з смугою прокрутки, користувач може здійснювати прокрутку за допомогою стрілок "вгору" і "вниз" на клавіатурі. Якщо ви хочете відключити таку можливість, встановіть параметр enableKeyboardNavigation в значення false.
API для роботи з jScrollPane
Останнє про що я трохи розповім - це API для управління jScrollPane. Доступ до API здійснюється дуже просто:
Тепер змінну api можна використовувати для доступу до функцій jScrollPane. Наприклад, цей код
запустить прінудітільное оновлення смуги прокрутки (не забувайте, що можна використовувати параметр autoReinitialise для автоматичного оновлення). Іншим цікавим методом API є scrollToElement. який дозволяє здійснити примусову прокрутку до певного елемента в контейнері; цей елемент передається через перший аргумент і може бути визначений або як об'єкт jQuery, або як вузол DOM, або як селектор jQuery. Другим аргументом передається логічне значення true або false. яке визначає, чи повинен елемент, до якого ми здійснюємо прокрутку, опинитися на самому верху контейнера; при встановленні на false. то jScrollPane спробує здійснити мінімальну прокрутку для того, щоб елемент просто з'явився у видимій області. Третім параметром також передається логічне значення, яке вказує, чи слід анімувати прокрутку. Продемонструємо цей метод на прикладі. Для цього внесемо невеликі зміни в нашу розмітку, яка використовувалася раніше:
Тут ми спочатку оголошуємо змінну api. за допомогою якої і будемо виконувати методи jScrollPane, а потім прив'язуємо обробник події click до заслання з класом .scroll_to_element. При кліці по посиланню спочатку буде заборонена обробка стандартного поведінки за допомогою методу preventDefault (). щоб браузер не намагався виконувати перехід по посиланню. Потім відбувається примусовий прокрутка, причому ми встановлюємо обидва логічних параметра в значення true. щоб елемент виявився нагорі видимій області і щоб прокрутка анімовані.
Існує ряд методів, які виконують подібні завдання: scrollTo (прокрутити до певної точки, яка задається як координати x і y щодо лівого верхнього кута контейнера); scrollToX і scrollToY (прокрутити до певної точки по осі x або y); scrollToPercentX і scrollToPercentY (прокрутити за відповідною осі на певний відсоток) та інші. Крім цього, API дозволяє опитувати jScrollPane: getIsScrollableH і getIsScrollableV (чи можна прокручувати по горизонталі і вертикалі); getContentPositionX і getContentPositionY (отримати положення по осі x і y відповідно); getPercentScrolledX і getPercentScrolledY (скільки відсотків прокручено по осі x і y відповідно) і ряд інших. І, нарешті, для того, щоб повернути контейнеру звичайну смугу прокрутки, видаливши функціонал jScrollPane, можна використовувати метод API destroy.
На цьому, мабуть, я закінчу огляд даної бібліотеки, яка може виявитися дійсно корисною багатьом розробникам. Як ми побачили, вона надає не тільки інтерфейс для досить гнучкою настройки, а й методи API для подальшого управління. Бібліотека знаходиться в стані постійного розвитку; якщо ви виявляєте баг або хочете запропонувати впровадити додатковий функціонал, відкрийте нову заявку в репозитарії на GitHub. Якщо повідомляєте про виявлену помилку, не забудьте детально її описати (використовувана версія бібліотеки, версія jQuery на вашому сайті, сценарій використання jScrollPane).
Для розробників Ruby on Rails
Дякую за розуміння і успішної роботи.
Follow me on Twitter to get updates about new articles >>
Please authorize via one of the following social networks to leave a comment: