jScrollPane плагин для создания своего скроллбара.

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

Но тем не менее, бывают случаи, когда нужно использовать свой дизайн сколлбара внутри блоков на странице.

Плагин для jQuery решает эту проблему. Имя ему - jScrollpane. Посмотреть как он выглядит можно на странице с множеством примеров. Скачать последнюю версию можно с github.

Использовать его достаточно легко, достаточно завернуть контент в два блока:
<div class="scroll-wrapper">
<div class="scroll-pane">
...
...
...
</div>
</div>

Причем div с классом "scroll-wrapper" используется только для позиционирования.

Вызывается плагин следующей функцией (список параметров в конце поста):
$(".scroll-pane").jScrollPane();

Подключить к странице нужные скрипты и стили:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" />


Два важных момента, из-за которых jScrollPane может не заработать сразу:
- нужно использовать последнюю версию плагина
- внутренний div с классом "scroll-pane" должен иметь заданную высоту и css-свойство "overflow:hidden;"

И напоследок параметры запуска:

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