Из этой статьи вы узнаете как можно создать уникальный скролл при использовании минимума усилий. В основу нашего решения положен настраиваемый скроллбар JScrollPane 2.

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

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

Ход установки

Установить необычный вид для скролла на сайте поможет библиотека JScrollPane 2. Алгоритм установки плагина достаточно прост и не выделяется особыми сложностями. Перед началом работы необходимо скачать пакет данных, который обеспечивает преобразование скролла. В него входит, в первую очередь, библиотека jquery, программный код плагина, поддержка прокручивания полосы прокрутки колесиком мыши (для этого выделен отдельный документ) и таблицу стилей, с помощью которой управляется особенности внешнего вида нового скролла.

После того, как были собраны все необходимые файлы плагина в отдельную папку и перемещены в специальное место на сайте, необходимо их все подключить к нашему ресурсу. В первую очередь необходимо подключить библиотеку и плагины, а также файл с CSS для скролла. Делается это с помощью следующего кода

HTML

<link type="text/css" rel="stylesheet" href="JScrollPane2/jquery.jscrollpane.css"/>
<script type="text/javascript" src="JScrollPane2/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" src="JScrollPane2/jquery.mousewheel.js"></script>
<script type="text/javascript" src="JScrollPane2/jquery.jscrollpane.js"></script>

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

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

HTML

<div class="scroll-pane">
		Контейнер с новым скроллом
</div>

В новопдключенную таблицу стилей необходимо добавить оформление нашего скролла, к примеру такое

CSS

.scroll-pane {
	width: 100%;
	height: 200px;
	overflow: auto;
}
.jspCap {
	display: block;
	background: #eeeef4;
}
.jspVerticalBar .jspCap {
	height: 20px;
}
.jspHorizontalBar .jspCap {
	width: 50px;
	height: 100%;
}

Завершающим этапом установки нового скролла на вашем ресурсе станет подключение js-кода, который инициализирует новую полосу прокрутки. Выглядит эта инициализация следующим образом

JavaScript

<script type="text/javascript">
	$(function()
{
	$('.scroll-pane').jScrollPane(
		{
			showArrows: true,
			horizontalGutter: 30,
			verticalGutter: 30
		}
	);
});
</script>

Настройки

Еще одно преимущество второй версии плагина по замене стандартного скролла заключается в гибкости настроек внешнего вида полосы, которая достигается с помощью целого ряда команд по инициализации. Запомнить каждую команду, а также ее функциональные возможности довольно сложно, поэтому ниже приводится их перечень с пояснениями для каждой из них

• showArrows — отвечает за вывод кнопок верхнего и нижнего пролистывания на полосе прокрутки.
• maintainPosition — с помощью этой команды определяется местоположение скролла при переинициализации кода. Ползунок может оставаться в текущем положении или возвращаться вверх или вниз.
• stickToBottom — включение этого параметра прижмет ползунок к нижней части полосы, даже при добавлении дополнительного объема контента он останется на своем месте, не смотря на то, что высота блока увеличится.
• stickToRight — похожий параметр с предыдущим, с тем отличием, что он предназначен для горизонтальной полосы прокрутки. При увеличении объема контента ползунок будет находится в крайнем правом положении.
• autoReinitialise — предназначено для установления автоматизированной переинициализации jScrollPane. Стоит отметить, что данная команда работает только с использованием таймера, который в свою очередь установит промежуток времени, по истечении которого будет проводиться переинициализация.
• autoReinitialiseDelay — устанавливает время, по истечении которого будет проводиться автоматическая переинициализация.
• verticalDragMinHeight — позволяет зафиксировать минимально-возможную высоту вертикального ползунка. Стоит отметить, что его высота устанавливается автоматически, в зависимости от объема контента, но обязательно нужно соответствовать указанным пределам минимума и максимума.
• verticalDragMaxHeight — позволяет зафиксировать максимально возможную высоту вертикального ползунка. Стоит отметить, что его высота устанавливается автоматически, в зависимости от объема контента, но обязательно нужно соответствовать указанным пределам минимума и максимума.
• horizontalDragMinWidth — позволяет зафиксировать минимально возможную высоту горизонтального ползунка. Стоит отметить, что его высота устанавливается автоматически, в зависимости от объема контента, но обязательно нужно соответствовать указанным пределам минимума и максимума.
• horizontalDragMaxWidth — позволяет зафиксировать максимально возможную высоту горизонтального ползунка. Стоит отметить, что его высота устанавливается автоматически, в зависимости от объема контента, но обязательно нужно соответствовать указанным пределам минимума и максимума.
• contentWidth — отвечает за ширину контейнера с текстом, обычно она устанавливается плагином самостоятельно, однако для предотвращения появления горизонтального скролла эта величина должна быть установлена принудительно.
• animateScroll — этот оператор контролирует способ появления полосы прокрутки, а точнее устанавливает анимационный эффект, а также можно определить вид анимации, в зависимости от вспомогательных операторов.
• animateDuration — устанавливает скорость анимационного перехода. Работает только в том случае, если анимация предусмотрена.
• animateEase — одна из разновидностей анимационного перехода.
• hijackInternalLinks — взаимодействует с внутренними ссылками на полосе прокрутки.
• verticalGutter — определяет отступ от вертикального скролла до контентной части блока.
• horizontalGutter — определяет отступ от горизонтального скролла до контентной части блока.
• mouseWheelSpeed — характеристика перемещения ползунка колесиком мышки, которая устанавливает связь между количеством проматываемого текста и оборотами колесика.
• arrowButtonSpeed — устанавливает количество проматываемого текста при клике на стрелку скролла.
• arrowRepeatFreq — отвечает за промотку текста при зажатии стрелки полосы прокрутки.
• arrowScrollOnHover — с помощью этого опреатора устанавливается возможность прокрутки текста при наведении на стрелки скролла.
• verticalArrowPositions — определяет позицию стрелок на вертикальной полосе с ползунком.
• horizontalArrowPositions — определяет позицию стрелок на горизонтальной полосе с ползунком.
• enableKeyboardNavigation — разрешает или запрещает использовать клавиатурные стрелки для пролистывания информации.
• hideFocus — при наведении фокуса отменяет эффект CSS-свойства outline. Практичнее использовать не эту команду, а соответствующие значения CSS.
• clickOnTrack — позволяет перемещать ползунок при зажатии мышки на определенном участке полосы скролла. Ползунок, соответственно, движется к выбранной точке на полосе.
• trackClickSpeed — определяет интенсивность прокрутке при зажатии кнопки мыши на полосе прокрутки.

jScrollPane API

Состоянием полосы прокрутки можно управлять не только операторами инициализации, но функциями API. Чтобы это стало возможным необходимо добраться до переменной jsp, что станет возможным после вставки следующего кода

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

После этой записи в файле с расширением js можно записывать функции. Ниже представлен их перечень с пояснениями их работы и предназначения

• reinitialise(s) — отвечает за переинициализацию скролла. После этого в силу вступают новые настройки.
• scrollToElement(ele, stickToTop, animate) — выводит окошко, в котором будет показываться, на сколько текст уже был промотан. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• scrollTo(destX, destY, animate) — прокрутка будет осуществляться по координатам, которые можно будет отслеживать в верхнем левом углу. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• scrollToX(destX, animate) — прокрутка проходит с отображением координаты X слева. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• scrollToY(destY, animate) — прокрутка проходит с отображением координаты Y сверху. Если значение 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) — пиксельная прокрутка ползунка в соответствии с ориентацией оси ординат. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• positionDragX(x, animate) — прокручивает текст на определенный участок относительно горизонтальной оси в соответствии с указанной координатой. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• positionDragY(y, animate) — прокручивает текст на определенный участок относительно вертикальной оси в соответствии с указанной координатой. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• animate(ele, prop, value, stepCallback) — позволяет настроить анимацию, которая будет применяться при прокрутке текста. С помощью аргумента ele будет выбираться объект анимации, prop — свойство, value — значение свойства, stepCallback — функция.
• getContentPositionX() — устанавливает ползунок в соответствии с его текущим расположением по оси абсцисс.
• getContentPositionY() - устанавливает ползунок в соответствии с его текущим расположением по оси ординат.
• getContentWidth() — установка ширины блока, не считая места, которое занимает скролл.
• getContentHeight() — установка высоты блока, не считая места, которое занимает скролл.
• getIsScrollableH() — этот оператор позволяет определить наличие горизонтальной полосы прокрутки.
• getPercentScrolledX() — перемещает видимую область с текстом в соответствующую координату по оси X.
• getPercentScrolledY() — перемещает видимую область с текстом в соответствующую координату по оси Y.
• getIsScrollableV() — этот оператор позволяет определить наличие вертикальной полосы прокрутки.
• getContentPane() — осуществляет переход к панели с текстом. Таким образом, можно редактировать содержимое по принципу обращения непосредственно к интересующему объекту.
• scrollToBottom(animate) — перемещает ползунок в самую нижнюю точку на полосе прокрутки. Если значение animate указано не будет, то анимация будет контролироваться через оператор animateScroll из первой таблицы.
• destroy() — отменяет действие плагина и возвращает изначальный вид скролла.

Подводя итог

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

• высокий показатель кроссбраузерности;
• осуществляет полный контроль за внешним видом и работой полосы прокрутки.

А вот это можно отнести к отрицательным сторонам

• большой объем плагина, что может замедлить работу ресурса (вес пакета 44 килобайта, в сжатой версии - 14.6)
• прокрутка колесиком мышки взаимодействует только с вертикальным скроллом.

В целом, вторая версия плагина имеет более мощный потенциал в сравнении со старой версией, однако это сказалось на весе плагина.