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

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

Вторая версия плагина jScrollPane, несомненно, заслуживает отдельной статьи. Вместе с тем мы не стали модернизировать первоначальную статью JScrollPane. Делаем красивый скроллинг, посвященную первой версии плагина, так как в некоторых ситуациях нужен будет именно первый вариант. Подробнее об этом будет ниже, а сейчас — встречайте! Герой дня JScrollPane 2!

Традиционный демо-пример.

Проверено в:

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

На официальной странице плагина можно посмотреть много других примеров.

Что качать?

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

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

<link type="text/css" rel="stylesheet" href="css/jquery.jscrollpane.css"/>

<script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>

В HTML каким-либо способом выделяем контейнер для скролла (например, присваиваем класс):

<div class="scroll-pane">
		Хочу себе необычный скролл!
</div>

В CSS задаем оформление контейнера:

.scroll-pane {
	width: 400px; /* Ширина видимой области*/
	height: 275px; /* Высота видимой области*/
	overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */
}

Настраиваем стили из jquery.jscrollpane.css (подробнее об этом немного ниже).

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

<script type="text/javascript">
	jQuery(function()
	{
		jQuery('.scroll-pane').jScrollPane();
	});
</script>

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

Настройка стилей

jquery.jscrollpane.css содержит стили на все случаи жизни. Привожу только те правила, которые скорее всего нужно будет настраивать:

/* вертикальная полоса прокрутки */
.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;   /* можно прижать к правому или левому краю */
	width: 16px;   /* ширина полосы прокрутки */
	height: 100%;
	background: red;
}
/* горизонтальная полоса прокрутки */
.jspHorizontalBar
{
	position: absolute;
	bottom: 0;  /* можно прижать к нижнему или верхнему краю */
	left: 0;
	width: 100%;
	height: 16px;  /* высота слушит шириной полосы прокрутки */
	background: red;
}

/* полоска, по которой бегает ползунок */
.jspTrack
{
	background: #dde;  /* цвет полосы, или фоновый рисунок  */
	position: relative;
}
/* сам ползунок */
.jspDrag
{
	background: #bbd;  /* цвет ползунка, или фоновый рисунок  */
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}
/* стрелки для прокрутки */
.jspArrow
{
	background: #50506d;  /* фон стрелки */
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}
/* стили для неактивной стрелки */
.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}
/* этими правилами можно задать различные стили для вертикальных и горизонтальных стрелок */
.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

/* стили для уголка - квадратной зоны где сходятся полосы прокрутки */
.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* кроме того можно задать стили для каждой стрелки отдельно (этих правил изначально в jquery.jscrollpane.css нет!) */

.jspArrowUp {}
.jspArrowDown {}
.jspArrowLeft {}
.jspArrowRight {}

Настройки

По сравнению с предыдущей версией появилось масса различных настроек инициализации. Целое море! Но не бойся, что бы не утонуть — мы составили табличку:

Название функции Описание функции Тип данных Значение по-умолчанию
showArrows Определяет, нужно ли показывать стрелки на полосе прокрутки. boolean false
maintainPosition Определяет, должен ли scrollpane сохранять позицию ползунка при переинициализации скрипта. Если нет, то ползунок при переинициализации возвращается в верхнее положение. См. также stickToBottom и stickToRight. boolean true
stickToBottom Если maintainPosition=true, а ползунок прокрутки прокручен до низа, то если stickToBottom=true, то при добавлении нового контента ползунок прокрутки так и останется внизу, несмотря на то, что блок растянулся в высоту. boolean false
stickToRight Если maintainPosition=true, а ползунок прокрутки прокручен до конца вправо, то если stickToBottom=true, то при добавлении нового контента ползунок прокрутки так и останется справа, несмотря на то, что блок растянулся в ширину. boolean false
autoReinitialise Автоматическая переинициализация jScrollPane. Это может помочь с случаях, когда размеры контента в блоке с прокруткой (или окружающих элементов) изменяются. Однако, необходим дополнительный JavaScript с таймером, поэтому эту функцию рекомендуется применять только в случае необходимости. boolean false
autoReinitialiseDelay Число в миллисекундах между автоматическими переинициализациями скрипта (если autoReinitialise = true). int 500
verticalDragMinHeight Минимальная высота вертикального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. int 0
verticalDragMaxHeight Максимальная высота вертикального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. int 99999
horizontalDragMinWidth Минимальная ширина горизонтального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. int 0
horizontalDragMaxWidth Максимальная ширина горизонтального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. int 99999
contentWidth Ширина контента блоке с прокруткой. Значение по умолчанию неопределено, что позволит JScrollPane посчитать ее самому. Однако, в некоторых случаях бывает нужно задать ее принудительно (например, для предотвращения горизонтальной прокрутки). int не определена
animateScroll Определяет, следует ли использовать анимацию при вызове ScrollTo или scrollBy. Можно контролировать скорость анимации и ослабление с помощью настроек animateDuration и animateEase, или если нужна более тонкая настройка, то можно переопределить функцию jQuery animate. boolean false
animateDuration Длительность анимированного перехода (если он есть, конечно). int 300
animateEase Тип перехода (см. jQuery animateScroll и jQuery easing) string linear
hijackInternalLinks Устанавливается в true, если на старнице используются внутренние ссылки для прокрутки ползунка boolean false
verticalGutter Расстояние между контентом и вертикальной полосой прокрутки. int 4
horizontalGutter Расстояние между контентом и горизонтальной полосой прокрутки. int 4
mouseWheelSpeed Множитель, определяющий на сколько смещается прокрутка при скроллинге колесиком мыши int 10
arrowButtonSpeed Множитель, определяющий на сколько смещается прокрутка при нажатии на стрелки int 10
arrowRepeatFreq Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата над одной из клавиш со стрелкой. int 100
arrowScrollOnHover Определяет, должен ли прокручиваться ползунок при наведении на клавиши со стрелками. boolean false
verticalArrowPositions Где должны появляться вертикальные стрелки относительно вертикального трека. string (split|before|after|os) split
horizontalArrowPositions Где должны появляться горизонтальные стрелки относительно горизонтального трека. string (split|before|after|os) split
enableKeyboardNavigation Определяет, можно ли использовать стрелки (и другие клавиши) на клавиатуре для навигации в блоке с прокруткой. boolean true
hideFocus Скрывает outline при фокусе. Не рекомендуется изменять этот параметр. Можно стилизовать outline с помощью CSS. boolean false
clickOnTrack При нажатии на треке ползунок переходит в точку, на которую нажали. boolean true
trackClickSpeed Множитель, определяющий на сколько смещается прокрутка когда мышь зажата над треком. int 30
trackClickRepeatFreq Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата над треком. int 100

jScrollPane API

Фактически, это функции, которые служат для управления скроллом.

Для работы с этими функциями нужно получить доступ к переменной jsp:

var element = jQuery('#my-element').jScrollPane();
var api = element.data('jsp');

После того, как это сделано, можно вызывать следующие функции:

reinitialise(s) Переинициализирует панель прокрутки (если ее внутренние размеры были изменены с момента инициализации). Настройки объекта, которые передается при переинициализации перекрывают любые предыдущие настройки. Если новые настройки не передаются, используются старые.
scrollToElement(ele, stickToTop, animate) Прокручивает элемент (JQuery объект, узел DOM или строку JQuery селектора) в поле зрения так, что его можно увидеть в окне просмотра. Если stickToTop=true, то элемент будет отображаться в верхней части окна, если false, то окна будут прокручиваться как можно меньше, чтобы показать элемент. Здесь же можно указать, что будет использоваться animate. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollTo(destX, destY, animate) Прокручивает панель так, что заданные координаты будут в верхнем левом углу. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollToX(destX, animate) Прокручивает панель так, что заданная координата x будет слева. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollToY(destY, animate) Прокручивает панель так, что заданная координата у будет сверху. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollToPercentX(destPercentX, animate) Прокручивает панель по горизонтали до определенного процента относительно максимальной позиции горизонтального скрола. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollToPercentY(destPercentY, animate) Прокручивает панель по вертикали до определенного процента относительно максимальной позиции вертикального скрола. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollBy(deltaX, deltaY, animate) Прокручивает панель на определенное количество пикселей по обоим осям. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollByX(deltaX, animate) Прокручивает панель на определенное количество пикселей по оси х. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
scrollByY(deltaY, animate) Прокручивает панель на определенное количество пикселей по оси y. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
positionDragX(x, animate) Прокручивает ползунок в определенню позицию по оси x (при этом, естественно, контент тоже прокручивается). Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
positionDragY(y, animate) Прокручивает ползунок в определенню позицию по оси у (при этом, естественно, контент тоже прокручивается). Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
animate(ele, prop, value, stepCallback) Этот метод вызывается, когда JScrollPane пытается анимировать прокрутку. Используется для тонкой настройки анимации. Можно передавать следующие аргументы:
  • ele — элемент, которое будет анимироваться
  • prop — свойство, которое будет анимироваться
  • value — значение свойства после анимации
  • stepCallback — функция, которую должна выполняться каждый раз при обновлении значения свойства
Можно использовать реализацию по умолчанию (см. исходный код), как базовую для собственного решения.
getContentPositionX() Возвращает текущую позицию по оси х видимого окна относительно панели с контентом.
getContentPositionY() Возвращает текущую позицию по оси y видимого окна относительно панели с контентом.
getContentWidth() Возвращает ширину контента без учета полосы прокрутки.
getContentHeight() Возвращает высоту контента без учета полосы прокрутки.
getIsScrollableH() Возвращает информацию о том, есть или нет в этом блоке горизонтальная прокрутка.
getPercentScrolledX() Возвращает горизонтальное положение видимого окна в панели с контентом.
getPercentScrolledY() Возвращает вертикальное положение видимого окна в панели с контентом.
getIsScrollableV() Возвращает информацию о том, есть или нет в этом блоке вертикальная прокрутка.
getContentPane() Возвращает ссылку на панель с контентом. Можно использовать для редактирования контента, как если бы ты получил доступ к элементу непосредственно.(Gets a reference to the content pane.
scrollToBottom(animate) Прокручивает контент до конца вниз. Если аргумент animate не указан, то для анимации будут использоваться настройки animateScroll из таблицы выше.
hijackInternalLinks() Используется при налиичии ссылок на содержимое прокрутки в случае, если эти ссылки менялись (например, подгружались с помощью AJAX).
destroy() Разрушает объект jScrollPane и восстанавливает начальное поведение браузера.

Примеры

Инициализация с использованием стрелок для прокрутки:

jQuery('.scroll-pane').jScrollPane({showArrows: true});

Задаем минимальную и максимальную длину ползунка прокрутки:

jQuery('.scroll-pane').jScrollPane(
	{
		verticalDragMinHeight: 20,
		verticalDragMaxHeight: 20,
		horizontalDragMinWidth: 20,
		horizontalDragMaxWidth: 20
	}
)

Пример вызова API для программной перемотки скроллбара:

var pane = jQuery('.scroll-pane');
pane.jScrollPane(
	{
		showArrows: true
	}
);
var api = pane.data('jsp');

jQuery('#but-scroll').bind(
	'click',
	function()
	{
		api.scrollTo(100, 100);
		return false;
	}
);

Плюсы:

  • адекватно работает во всех популярных браузерах;
  • позволяет гибко настроить вид и поведение скролла;

Минусы:

  • немного великоват (в несжатом виде 44Kb, в сжатом 14.6Kb);
  • прокрутка колесиком мыши «не дружит» с горизонтальным скроллом.

Невооруженным глазом видно, что плагин стал гораздо мощнее, по сравнению с первой версией, хотя, конечно за это приходится расплачиваться — размер скрипта вырос вдвое.

Про резиновый ползунок

Update 15.11.2011 by ksu.

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

Новая версия плагина тоже позволяет это сделать, но решение немного замаскировано. Как и раньше, присутствуют специальные классы jspDragTop и jspDragBottom. Остается в CSS задать ширину, высоту фоны и позиционирование.

Материал

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