This page has been robot translated, sorry for typos if any. Original content here.

JScrollPane. Робимо красивий скролінг

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

Наприклад, такий:

завдання

Реалізувати вертикальний скроллбар, що відповідає таким вимогам:

    * Відповідність дизайну;
    * Кроссбраузерность;
    * Можливість скролл коліщатком миші.

Рішення

Не будемо винаходити велосипед, благо розумні люди вже попрацювали за нас. Використовуємо безкоштовний плагін jScrollPane - він повністю відповідає перерахованим вимогам.

З його допомогою можна зробити ось такий скролл або ось такий.

Перевірено в:

    * IE 6-8 * Firefox 3 * Opera 9.5-10 * Safari 3

Кому мало, можна подивитися інші приклади на офіційній сторінці плагіна.

Що качати?

Швидкий старт

Підключаємо бібліотеки і не забуваємо про CSS:

<code>&lt;link type=text/css rel=stylesheet href=css/jScrollPane.css /&gt;&lt;script type=text/javascript src=js/jquery-1.4.2.min.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=js/jquery.mousewheel.min.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=js/jScrollPane.js&gt;&lt;/script&gt;</code>

Створюємо в HTML контейнер для скролла:

<code>&lt;div class=scrollBox&gt;&lt;div id=pane class=scroll-pane&gt;Хочу себе необычный скролл! &lt;/div&gt;&lt;/div&gt;</code>

В CSS задаємо оформлення контейнера:

<code>.scroll-pane { width: 700px; /* Ширина видимой области*/ height: 275px; /* Высота видимой области*/ overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */ }</code>

Налаштовуємо стилі з jScrollPane.css і малюємо картинки (докладніше про це нижче).

Останній крок - инициализируем скролл скриптом:

<code>&lt;script type=text/javascript&gt;jQuery(function() { jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); &lt;/script&gt;</code>

А тепер про все докладніше

Детальніше про HTML

В наведеному вище прикладі створюється два контейнера: scroll-pane і scrollBox, а використовується фактично тільки scroll-pane. Для чого ж потрібен зовнішній контейнер scrollBox? Він стане в нагоді для позиціонування області з прокруткою, так як спозиционировать сам scroll-pane досить важко, адже скрипт оберне його ще й своїм власним контейнером. Взагалі кажучи, використовувати зовнішній див (у нас scrollBox) для позиціонування - це рада з офіційного сайту плагіна.

Детальніше про CSS

Обіцянки детальний розбір jScrollPane.css:

<code>.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } /* Трек - полоса по которой бегает ползунок */ .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scrollTrak.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ } /* Средняя часть ползунка (резиновая, т.к. ползунок меняет высоту в зависимости от количества содержимого) */ .jScrollPaneDrag { position: absolute; background: url(../images/scrollDrag.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ cursor: pointer; overflow: hidden; left:1px; } /* верхушка ползунка (можно задать height:0, если ползунок не имеет выраженной верхушки) */ .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; background: url(../images/scrollDragTop.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота верхушки */ } /* низ ползунка (можно задать height:0, если ползунок не имеет выраженного низа) */ .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; background: url(../images/scrollDragBot.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота низа */ } /* стрелка вверх (правило можно исключить, если скролл по дизайну без стрелок) */ a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_up.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ } /* стрелка ввниз (правило можно исключить, если скролл по дизайну без стрелок)*/ a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_down.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ }</code>

Детальніше про js

Визначено дві функції:

jScrollPane инициализирует скролл, згідно заданим параметрам (список див. у таблиці нижче).
jScrollPaneRemove «Деініціалізацію» - видаляє стильний скролл і відновлює стандартний.

Прараметри jScrollPane ()

Назва функції опис функції Тип даних
scrollbarWidth ширина нестандартної смуги прокрутки в пікселях. Значення за замовчуванням 10 int
scrollbarMargin відступи зліва від смуги прокрутки в пікселях. Значення за замовчуванням 5 int
wheelSpeed вказує, як швидко колесо миші змусить контент прокручуватися в пікселях. Значення за замовчуванням 18 int
showArrows вказує, відображати чи стрілки на смузі прокрутки. Значення за замовчуванням false boolean
arrowSize висота стрілок якщо showArrows = true (якщо не задана, розраховується з CSS) int
animateTo чи потрібна анімація при виклику scrollTo і scrollBy. Значення за замовчуванням false boolean
dragMinHeight мінімальна висота, при якій можна буде перетягнути повзунок. Значення за замовчуванням 0 int
animateInterval Інтервал в мілісекундах для поновлення анімації scrollPane. Значення за замовчуванням 100 int
animateStep Відстань, яку проходить повзунок за один крок анімації. Значення за замовчуванням 3 int
maintainPosition Якщо ви хочете, щоб смуга прокрутки зберігала своє становище при переініціалізація, тоді вона не буде прокручуватися при додаванні більшої кількості контенту. Значення за замовчуванням true boolean
scrollbarOnLeft Визначає, що смуга прокрутки повинна з'явитися зліва від контенту (переконайтеся, що CSS також відображає цей момент) boolean
reinitialiseOnImageLoad Чи повинен скрипт автоматично переініціалізіроваться при підвантаження картинок в контенті. Значення за замовчуванням false boolean

Трохи про динаміку

У разі, якщо ширина (висота) скролла змінюється динамічно необхідно викликати послідовно функції jScrollPaneRemove і jScrollPane.

Припустимо, маємо такий CSS:

<code>.scrollBox{ width:200px; } .scroll-pane { width: 100%; height: 100px; overflow: auto; }</code>

Скрипт змінює ширину scrollBox, тим самим автоматично змінюючи ширину .scroll-pane:

<code>&lt;script type=text/javascript&gt;jQuery('#more').click(function() { jQuery('.scrollBox').css('width','300px'); jQuery('#pane').jScrollPaneRemove(); jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); &lt;/script&gt;</code>

демо приклад

перевірено

    * IE 6-8 * Firefox 3 * Opera 9.5-10 * Safari 3

Нюанс з прокруткою коліщатком миші

У jScrollPane є одна цікава особливість. Якщо крутити скролл коліщатком миші, то після того, як весь вміст контейнера проскроллітся, починає крутитися основний скроллбар сторінки (звичайно якщо він є).

Судячи по коду jScrollPane.js це зроблено спеціально (а значить це не баг а фіча). Але якщо ця особливість заважає, її запросто можна відключити.

Ліземо в код jScrollPane.js і знаходимо там рядки:

<code>$container.bind( 'mousewheel', function (event, delta) { ...тра-та-та многабукофф... return !dragOccured; } );</code>

Міняємо return! DragOccured; на return false;

Усе! Тепер коліщатко веде себе більш логічно і не буде керувати основним скролл сторінки, поки курсор миші не вийде за межі контейнера.

Прокрутка до потрібної позиції (update 1.08.10)

Іноді потрібно відразу (або по якомусь дії) прокрутити блок з таким скроллингом до певної позиції. Для цього плагін має дві (чомусь погано описані) функції:

scrollTo - прокрутити контент до зазначеної позиції. Позицію можна вказати в px (вважаємо від верхньої межі цього самого блоку з прокруткою) або задати id - блок прокрутиться до елемента з вказаним id

scrollBy - прокрутити блок на вказане число пікселів щодо поточної позиції

Функції чіпляються до блоку, на який вішалася ініціалізація скролінгу.

<code>&lt;script type=text/javascript&gt;jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); jQuery('#pane')[0].scrollTo(500); &lt;/script&gt;</code>

Зверну увагу, що "[0]" - це обов'язково. Навіщо воно - не знаю (бажаючим дізнатися копати код плагіна), але без цього не працює.

плюси:

    * Адекватно працює у всіх популярних браузерах;
    * Дозволяє гнучко налаштувати вигляд і поведінку скролла;
    * Скрол коліщатком миші.

мінус:

    * Не реалізована горизонтальна прокрутка.