Стилизуем полосы прокрутки с jScrollPane
Наверное, многие сталкивались с проблемой стилизации полос прокрутки (скролл-баров). В этой статье вы узнаете, как создать простейший скролл-бар и стилизовать его, используя плагин jScrollPane.
Пример работы скрипта вы можете посмотреть здесь.
Пример работы скрипта вы можете посмотреть здесь.
Что нужно?
Для работы скрипта необходимо загрузить на сайт следующие 2 скрипта:- jquery.jscrollpane.js (14.76 Kb)
- jquery.mousewheel.js (2.34 Kb)
Код
<script src="http://адрес_сайта/jquery.mousewheel.js"></script>
<script src="http://адрес_сайта/jquery.jscrollpane.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;}
.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>
<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;}
.white {background:#fafafa;border-radius:3px;padding:15px;}
Для <div> , к которому мы будем присоединять скролл-бар, добавляем следующие стили:
Код
#pane {
max-height:200px; /* Выставляем ограничение по высоте */
overflow:auto; /* Добавляем стандартные полосы прокрутки на случай, если скрипт не сработает. */
outline:none; /* Убираем неприятную обводку при фокусе. */
}
max-height:200px; /* Выставляем ограничение по высоте */
overflow:auto; /* Добавляем стандартные полосы прокрутки на случай, если скрипт не сработает. */
outline:none; /* Убираем неприятную обводку при фокусе. */
}
Код
<script type="text/javascript">
jQuery(function(){
$('#pane').jScrollPane();
});
</script>
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>
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');
var api = pane.data('jsp');
Пример вызова API-функции:
Код
var pane = $('#pane').jScrollPane();
var api = pane.data('jsp');
api.scrollTo(100, 100); // Прокрутка до 100px (x) и 100px (y)
var api = pane.data('jsp');
api.scrollTo(100, 100); // Прокрутка до 100px (x) и 100px (y)
Мне нравится 18
Просмотры: 5361 · Комментарии: 5 · Добавил: Kelin · Категория: Статьи по JavaScript
