jQuery плагин Tiny Scrollbar дает нам в руки мощный инструмент для создания стилизованных полос прокрутки. В то же время он на удивление компактен.
Без лишних слов, смотрим демо-пример.
Проверено в:
IE 6-8
Firefox 4
Opera 11
Safari
Chrome
Что качать?
библиотеку jquery качаем или подключаем из хранилища.
jquery.tinyscrollbar.min.js (4.09 Kb) — собственно плагин.
tinyscrollbar.css (2.08 Kb) стили для плагина.
images.rar (8.52 Kb) картинки.
Быстрый старт
Подключаем библиотеки и не забываем про CSS:
HTML
<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 создаем немного громоздкую конструкцию для скролла:
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 и картинки в соответствии с дизайном.
Последний шаг — инициализируем скролл скриптом:
Javascript
<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'
Примеры инициализации с параметрами
Прокрутка по горизонтальной оси:
Javascript
jQuery('#scrollbar').tinyscrollbar({ axis: 'x'});
Фиксированные размеры трека и ползунка:
Javascript
jQuery('#scrollbar').tinyscrollbar({ size: 100, sizethumb: 15 });
Метод tinyscrollbar_update
Для переинициализации скроллбара служит метод tinyscrollbar_update. Его нужно вызывать если динамически меняется контент внутри области с прокруткой или если изначально блок с прокруткой был невидим (display: none). Пример:
Javascript
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", можно реализовать кнопку перемотки в определенную позицию:
Javascript
var oScroll = $('#scrollbar');
oScroll.tinyscrollbar();
//якорь для перемотки
$('#scrollbar-anchor').click(function(){
oScroll.tinyscrollbar_update(50);
return false;
});
Плюсы:
Автором плагина заявлена поддержка iPhone, iPad, Android. Правда на практике оказалось, что типичный размер ползунка не позволяет удобно с ним обращаться на мобильном устройстве. Соответственно в идеале нужно предусмотреть под эти устройства отдельные стили с увеличенным ползунком.
Скроллится колесом мыши, перетягиванием ползунка или щелчком по треку.
Поддерживает программную перемотку.
Легкий по весу и удобный в настройке.
Минуcы:
Не может реализовать одновременно и горизонтальную и вертикальную прокрутку (только по отдельности).
Громоздкий HTML (как правило вспомогательный код добавляет сам плагин, а тут нужно об этом заботиться самому).
Вывод
Легкий и удобный плагин для решения несложных задач по реализации стилизованного скролла. Основное достоинство — поддержка мобильных устройств.