Tiny Scrollbar — настраиваемый скроллбар

Автор: Александр Головко Дата публикации:

jQuery плагин Tiny Scrollbar дает нам в руки мощный инструмент для создания стилизованных полос прокрутки. В то же время он на удивление компактен.

Без лишних слов, смотрим демо-пример.

Проверено в:

IE 6-8
Firefox 4
Opera 11
Safari
Chrome

Что качать?

библиотеку jquery качаем или подключаем из хранилища.
(4.09 Kb) — собственно плагин.
(2.08 Kb) стили для плагина.
(8.52 Kb) картинки.

Быстрый старт

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

<link type="text/css" rel="stylesheet" href="css/tinyscrollbar.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

В HTML создаем немного громоздкую конструкцию для скролла:

<div id="scrollbarY">
	<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
	<div class="viewport">
		<div class="overview">
			Вот тут сам скролящийся контент
		</div>
	</div>
</div>

При необходимости корректируем стили из tinyscrollbar.css и картинки в соответствии с дизайном.

Последний шаг — инициализируем скролл скриптом:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#scrollbarY').tinyscrollbar();	
});
</script>

А теперь подробнее

При инициализации, можно передавать следующие параметры:

Параметры tinyscrollbar()

Название параметра	Описание	Значение по умолчанию
axis	Вертикальная или горизонтальная прокрутка ('x'/'y').	y
wheel	Сколько пикселей перематывается одним движением колеса мыши.	40
scroll	Включение/выключение прокрутки колесом мыши (true/false).	true
size	Размер полосы прокрутки. auto — в зависимости от контента, или задаем число в пикселях.	'auto'
sizethumb	Размер ползунка. auto — в зависимости от контента, или задаем число в пикселях.	'auto'

Примеры инициализации с параметрами

Прокрутка по горизонтальной оси:

jQuery('#scrollbar').tinyscrollbar({ axis: 'x'});

Фиксированные размеры трека и ползунка:

jQuery('#scrollbar').tinyscrollbar({ size: 100, sizethumb: 15 });

Метод tinyscrollbar_update

Для переинициализации скроллбара служит метод tinyscrollbar_update. Его нужно вызывать если динамически меняется контент внутри области с прокруткой или если изначально блок с прокруткой был невидим (display: none). Пример:

var oScrollbar = jQuery('#scrollbar');
oScrollbar.tinyscrollbar();
//тут расположены команды, динамически меняющие контент
oScrollbar.tinyscrollbar_update();

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

Пример параметра	Действие
tinyscrollbar_update()	по умолчанию в самый верх
tinyscrollbar_update('bottom')	в самый низ
tinyscrollbar_update('relative')	при изменении контента запоминается текущее положение ползунка
tinyscrollbar_update(X)	перемотать на X пикселей сверху

Например, если в HTML есть элемент с id="scrollbar-anchor", можно реализовать кнопку перемотки в определенную позицию:

var oScroll = $('#scrollbar');
oScroll.tinyscrollbar();
//якорь для перемотки
$('#scrollbar-anchor').click(function(){
	oScroll.tinyscrollbar_update(50);
	return false;
});

Плюсы:

Автором плагина заявлена поддержка iPhone, iPad, Android. Правда на практике оказалось, что типичный размер ползунка не позволяет удобно с ним обращаться на мобильном устройстве. Соответственно в идеале нужно предусмотреть под эти устройства отдельные стили с увеличенным ползунком.
Скроллится колесом мыши, перетягиванием ползунка или щелчком по треку.
Поддерживает программную перемотку.
Легкий по весу и удобный в настройке.

Минуcы:

Не может реализовать одновременно и горизонтальную и вертикальную прокрутку (только по отдельности).
Громоздкий HTML (как правило вспомогательный код добавляет сам плагин, а тут нужно об этом заботиться самому).

Вывод

Легкий и удобный плагин для решения несложных задач по реализации стилизованного скролла. Основное достоинство — поддержка мобильных устройств.

Материал

Tiny Scrollbar

Xiper