Наверное, многие сталкивались с проблемой стилизации полос прокрутки (скролл-баров). В этой статье вы узнаете, как создать простейший скролл-бар и стилизовать его, используя плагин jScrollPane. Установка: Для работы скрипта необходимо загрузить на сайт следующие 2 скрипта: jquery.jscrollpane.js (14.76 Kb) jquery.mousewheel.js (2.34 Kb) И подключить их на страницу, добавив в <head>: Код
<script src="http://адрес_сайта/jquery.mousewheel.js"></script>
<script src="http://адрес_сайта/jquery.jscrollpane.js"></script>
Ну и, разумеется, стили, скролл-бары будут схожи со скролл-барами ВКонтакте. Вставляем стили в свой CSS: Код
.jspContainer{overflow:hidden;position:relative;}
.jspPane{position:absolute;}
/* Вертикальная полоса прокрутки */
.jspVerticalBar{height:100%;position:absolute;right:0;top:0;width:5px;z-index:2;}
/* Горизонтальная полоса прокрутки */
.jspHorizontalBar{bottom:0;height:5px;left:0;position:absolute;width:100%;}
.jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0;}
.jspCap{display:none;}
.jspHorizontalBar .jspCap{float:left;}
/* Полоска, по которой бегает ползунок */
.jspTrack{background:#eee;position:relative;border-radius:5px;}
/* Непосредственно, сам ползунок */
.jspDrag{background:#aaa;cursor:pointer;left:0;position:relative;top:0;border-radius:5px;}
.jspDrag:hover {background:#999;}
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%;}
/* Стрелки для прокрутки */
.jspArrow{background:#999;cursor:pointer;display:block;text-indent:-20000px;}
/* Неактивные стрелки для прокрутки */
.jspArrow.jspDisabled{background:#aaa;cursor:default;}
/* Дополнительные стили для вертикальных и горизонтальных стрелок */
.jspVerticalBar .jspArrow{height:16px;}
.jspHorizontalBar .jspArrow{float:left;height:100%;width:5px;}
.jspVerticalBar .jspArrow:focus{outline:none;}
/* Уголок, где сходятся вертикальная и горизонтальная полосы прокрутки */
.jspCorner{float:left;height:100%;}
* html .jspCorner{margin:0 -3px 0 0;}
Вот, собственно, и все, что необходимо было установить. Как использовать? Для начала создадим блок с текстом, над которым мы и будем работать в дальнейшем. HTML: Код
<div class="black">
<div class="white">
<div id="pane">
<p>Много-много текста...</p>
</div>
</div>
</div>
Стилизуем блок, как душе угодно. Можно например вот так: Код
.black {position:relative;width:400px;border-radius:3px;margin:0 auto;color:#777;padding:5px;text-align:justify;background: rgba(0,0,0,0.9);}
.white {background:#fafafa;border-radius:3px;padding:15px;}
Для <div> , к которому мы будем присоединять скролл-бар, добавляем следующие стили: Код
#pane {
max-height:200px; /* Выставляем ограничение по высоте */
overflow:auto; /* Добавляем стандартные полосы прокрутки на случай, если скрипт не сработает. */
outline:none; /* Убираем неприятную обводку при фокусе. */
}
Теперь JavaScript: Код
<script type="text/javascript">
jQuery(function(){
$('#pane').jScrollPane();
});
</script>
И теперь у нашего блока появился скролл-бар, который можно стилизовать под свои нужды. Дополнительные настройки Данный плагин имеет множество настроек, а так же API-функционал: Код
<script type="text/javascript">
jQuery(function(){
$('#pane').jScrollPane({
showArrows:true, // Показываем стрелки на полосе прокрутки.
autoReinitialise:true, // Включаем автоматическую переинициализацию скрипта. Необходимо для элементов, которые меняют свою ширину/высоту.
autoReinitialiseDelay:1000, // Переинициализация скрипта 1 раз в секунду.
animateScroll:true, // Анимация прокрутки при вызове scrollTo и scrollBy.
mouseWheelSpeed:30, // На сколько пикселей производится прокрутка при скроллинге колесом мыши.
arrowButtonSpeed:30, // На сколько пикселей производится прокрутка при клике по стрелкам.
arrowScrollOnHover:true, // Включить скроллинг при наведении на стрелки.
hideFocus:true, // Скрываем outline при фокусе. Лучше не использовать эту функцию, а скрыть outline с помощью средств CSS.
clickOnTrack:true, // При нажатии на треке ползунок переходит в ту точку, на которую вы нажали.
trackClickSpeed:30, // На сколько пикселей производится прокрутка, пока мышь зажата на треке.
trackClickRepeatFreq:100 // Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата на треке
});
});
</script>
API-функционал. В скрипте так же редусмотрены функции управления скроллом. Для работы необходимо получить доступ к переменной "jsp": Код
var pane = $('#pane').jScrollPane();
var api = pane.data('jsp');
Теперь мы можем управлять скроллом, обращаясь к переменной "api" и задавая необходимые функции. Список функций перечислен на оф. сайте Пример вызова API-функции: Код
var pane = $('#pane').jScrollPane();
var api = pane.data('jsp');
api.scrollTo(100, 100); // Прокрутка до 100px (x) и 100px (y)
На этом всё!