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

Рассмотрим два решения этой проблемы, на разных фреймворках — 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')