Установка скролла JScrollPane 2, Vaden Pro

Із цієї статті ви дізнаєтеся, як створити унікальний скролл при використанні мінімуму зусиль. В основу нашого рішення покладено скроллбар JScrollPane 2, що настроюється.

установка

Невід'ємною частиною юзабіліті кожного сайту є використання скрола. Для тих, хто не знає, скролл - це та сама смуга прокручування, яка з'являється ліворуч або знизу в тому випадку, коли вміст сторінки не влазить в активну зону екрана.

Хід установки

Встановити незвичайний вигляд для скролла на сайті допоможе бібліотека JScrollPane 2. Алгоритм установки плагіна досить простий і не вирізняється особливими складнощами. Перед початком роботи необхідно завантажити пакет даних, який забезпечує перетворення скрола. У нього входить, в першу чергу, бібліотека jquery, програмний код плагіна, підтримка прокручування смуги прокручування коліщатком миші (для цього виділено окремий документ) та таблицю стилів, за допомогою якої керується особливості зовнішнього вигляду нового скролла.

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

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

У новопідключену таблицю стилів потрібно додати оформлення нашого скролла, наприклад таке

Завершальним етапом встановлення нового скролу на вашому ресурсі стане підключення js-коду, якийініціалізує нову смугу прокручування. Виглядає ця ініціалізація в такий спосіб

Ще одна перевага другої версії плагіна по заміні стандартного скролла полягає в гнучкості налаштувань зовнішнього вигляду смуги, яка досягається за допомогою низки команд з ініціалізації. Запам'ятати кожну команду, а також її функціональні можливості досить складно, тому нижче наводиться їхній перелік з поясненнями для кожної з них

jScrollPane API

Станом прокручування можна керувати не тільки операторами ініціалізації, але функціями API. Щоб це стало можливим, необхідно дістатися до змінної jsp, що стане можливим після вставки наступного коду

Після цього запису у файлі з розширенням js можна записувати функції. Нижче наведено їх перелік з поясненнями їх роботи та призначення

  • reinitialise(s)- відповідає за переініціалізацію скролла. Після цього набувають чинності нові налаштування.
  • scrollToElement(ele, stickToTop, animate)- виводить віконце, в якому буде показуватися, на скільки текст уже був промотаний. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollTo(destX, destY, animate)– прокручування здійснюватиметься за координатами, які можна буде відстежувати у верхньому лівому кутку. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollToX(destX, animate)– прокручування проходить з відображенням координати X зліва. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollToY(destY, animate)– прокручування проходить з відображеннямкоординати Y зверху. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollToPercentX(destPercentX, animate)– вказує діапазон можливої ​​горизонтальної прокрутки повзунка у відсотковому співвідношенні від усієї довжини смуги. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollToPercentY(destPercentY, animate)– вказує діапазон можливої ​​вертикальної прокрутки повзунка у відсотковому співвідношенні від усієї довжини смуги. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollBy(deltaX, deltaY, animate)– встановлює межі прокручування у пікселях на вертикальній та горизонтальній смугах. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollByX(deltaX, animate)– піксельна прокрутка повзунка відповідно до орієнтації осі абсцис. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • scrollByY(deltaY, animate)- піксельна прокрутка повзунка відповідно до орієнтації осі ординат. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • positionDragX(x, animate)– прокручує текст на певну ділянку щодо горизонтальної осі відповідно до зазначеної координати. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • positionDragY(y, animate)–прокручує текст на певну ділянку щодо вертикальної осі відповідно до зазначеної координати. Якщо значення animate вказано не буде, анімація буде контролюватись через оператор animateScroll з першої таблиці.
  • animate(ele, prop, value, stepCallback)– дозволяє налаштувати анімацію, яка буде застосовуватися під час прокручування тексту. За допомогою аргументу ele вибиратиметься об'єкт анімації, prop — властивість, value — значення властивості, stepCallback — функція.
  • getContentPositionX()– встановлює повзунок відповідно до його поточного розташування по осі абсцис.
  • getContentPositionY()- встановлює повзунок відповідно до його поточного розташування по осі ординат.
  • getContentWidth()– установка ширини блоку, крім місця, яке займає скролл.
  • getContentHeight()– встановлення висоти блоку, крім місця, яке займає скролл.
  • getIsScrollableH()– цей оператор дозволяє визначити наявність горизонтальної смуги прокручування.
  • getPercentScrolledX()– переміщує видиму область з текстом у відповідну координату по осі X.
  • getPercentScrolledY()– переміщує видиму область з текстом у відповідну координату по осі Y.
  • getIsScrollableV()– цей оператор дозволяє визначити наявність вертикальної смуги прокручування.
  • getContentPane()– здійснює перехід до панелі з текстом. Таким чином, можна редагувати вміст за принципом звернення безпосередньо до об'єкта, що цікавить.
  • scrollToBottom(animate)– переміщає повзунок у нижню точку на смузі прокручування. Якщо значення animate вказано не буде, то анімація буде контролюватись через оператор animateScroll.перша таблиця.
  • destroy()– скасовує дію плагіна та повертає початковий вигляд скролу.

Підводячи підсумок

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

  • високий показник кросбраузерності;
  • здійснює повний контроль за зовнішнім виглядом та роботою смуги прокручування.

А ось це можна віднести до негативних сторін

  • великий обсяг плагіна, що може уповільнити роботу ресурсу (вага пакета 44 кілобайти, у стислій версії - 14.6)
  • прокручування коліщатком мишки взаємодіє лише з вертикальним скролом.

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