Tiny Scrollbar — настраиваемый скроллбар
Дата публикации: 29.08.2011
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:
<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 (как правило вспомогательный код добавляет сам плагин, а тут нужно об этом заботиться самому).
Вывод
Легкий и удобный плагин для решения несложных задач по реализации стилизованного скролла. Основное достоинство — поддержка мобильных устройств.