Оформление скроллбара (кроссбраузерно)

Не нашел подобную статью на хабре, а тут как раз пришлось столкнуться с данной проблемкой.

Рассмотрим два решения этой проблемы, на разных фреймворках — jQuery (jScrollPane) и MooTools (MooTools ScrollContro).


Итак, фреймворки.

MooTools ScrollContro

Плагин позволяет заменить скроллбар в любом контейнере, в котором он используется (количество контейнеров не ограничено).
Доступные функции:

• Перетаскивание бегунка вверх-вниз
• Управление стрелками вверх-вниз
• Использование колесика мыши

Кроме этого:

• Размер бара изменяется в зависимости от содержания блока
• Колесико мыши используется, только если курсор находится над содержанием
• Если содержание меньше, чем заданное пространство, то контроллеры скроллбара не будут выводиться

плюсы:

• Если JavaScript отключен выводится стандартный скроллбар
• Вид скролла полностью настраивается с помощью CSS
• Неограниченное число скроллбаров
• Работает в IE, FF, Opera, Safari, Chrome

Применять его очень просто. Достаточно лишь поместить контент в контейнер с идентификатором #contentcontainer:

Text content



При этом его оформление может быть разным, но в CSS описании обязательно должен присутствовать атрибут overflow:auto или overflow:scroll. Например:

#contentcontainer {
height: 300px;
width: 435px;
padding-top: 0;
padding-right: 10px;
overflow: scroll;
overflow-x: hidden;
margin-top: 20px;
font-size: 1.1em;
}

Включить работу самого плагина нужно с помощью простой функции:

window.addEvent('domready', function() {
new ScrollControl($('contentcontainer'), {'createControls': true});
});

При использовании нескольких контейнеров, им нужно присваивать разные идентификаторы. Можно самим определять названия для элементов управления и для контейнера со скроллом, если необходимо, чтобы второй контейнер отличался от первого:

new ScrollControl($('contentcontainer1'), {'htmlElementPrefix': 'control2_'}, $('scrolltrack1'), $('scrollknob1'), $('scrollUpBtn1'), $('scrollDownBtn1'));

где:

• htmlElementPrefix — префикс контейнера-маски
• scrolltrack1 — альтернативный класс для контейнера по которому движется бегунок
• scrollknob1 — альтернативный класс бегунка
• scrollUpBtn1 и scrollDownBtn1 — кнопки вниз и вверх на скролле

Для использования понадобится библиотека Mootools 1.11 и сам плагин, который можно скачать на eSteak.net. Плагин создан A+media.

jScrollPane

jScrollPane — jQuery плагин, который позволяет заменить дефолтный скроллбар браузера в любом блоке со стилем overflow:auto.
Изменять внешний вид прокрутки можно с помощью CSS.

jScrollPane кроссбраузерное решение на jQuery. Если браузер пользователя не поддерживает jQuery или JavaScript, то он увидит дефолтный системный скролл. Для точной копии всех событий мыши нужно подключить дополнительно mouse wheel plugin.

Использование
Подключить следующие файлики.

• jquery-1.2.6.min.js (Библтотека jQuery)
• jquery.mousewheel.min.js (the mouse wheel плагин (если нужна полная поддержка всех событий мыши))
• jquery.em.js (the jQEm плагин для автоматического изменения размера скролла, в соответствии с количеством контента)
• jScrollPane.js (сам jScrollPane плагин)
• jScrollPane.css (стили собственно)

Все файлы можно загрузить со страницы jScrollPane.

Можно использовать любой селектор, по отношению к элементу, к которому нужно применить действие плагина. Например, с приведенным ниже кодом, плагин работает, когда документ содержит хотя бы один элемент с классом scroll-pane:

$(function()
{
$('.scroll-pane').jScrollPane();
});

Дополнительные параметры:

• scrollbarWidth [int] — ширина скроллбара в пикселях (по умолчанию 10)
• scrollbarMargin [int] — отступ слева от скроллбара в пикселях (по умолчанию 5)
• wheelSpeed [int] — управление скоростью перемещения контента при скролле в пикселях (по умолчанию 18)
• showArrows [boolean] — управляет выводом стрелочек вверх-вниз (по умолчанию задано 'false')
• arrowSize [int] — высота стрелок если showArrows=true (подсчитывается из CSS если не задана)
• animateTo [boolean] — определяет автопрокрутку к определенному флагу scrollTo and scrollBy (по умолчанию 'false')
• dragMinHeight [int] — минимальная высота при которой появляется скролл (по умолчанию 0)
• dragMaxHeight [int] — максимальная высота при которой появляется скролл (по умолчанию 99999!)
• animateInterval [int] — Интервал в миллисекундах для обновления и анимации области скролла (по умолчанию 100)
• animateStep [int] — Определяет расстояние при достижении которого начинается анимация (по умолчанию 3)
• maintainPosition [boolean] — Позволяет зафиксировать позицию контента при его изменении (по умолчанию 'true')
• scrollbarOnLeft [boolean] — Определяет положение скроллбара слева от контента (также можно определить с помощью CSS)
• reinitialiseOnImageLoad [boolean] — Определяет должен ли скрипт реинициализировать себя при добавлении в контент изображения (по умолчанию 'false')