Главная/ Собираем HTML и CSS приемы/ Javascript: решения и плагины/ Ui/ Tiny Scrollbar — настраиваемый скроллбар

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

Дата публикации: 29.08.2011

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

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

Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari
  • Chrome

Что качать?

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

Подключаем библиотеки и не забываем про 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 (как правило вспомогательный код добавляет сам плагин, а тут нужно об этом заботиться самому).

Вывод

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

Материал

По теме

Показать комментарии