Полоса прокрутки jquery jscrollpane.min.js на jQuery

При создании сайтов может потребоваться индивидуализация полосы прокрутки на различных текстовых областях. Рассмотрим сначала способ создания обычной полосы прокрутки на html для блоков, а затем с использованием скрипта.

Для создания простой полосы прокрутки рассмотрим такую структуру:

<div class="scroll">
Очень длинный текст
</div>

Внутри .scroll будут находиться теги с длинным текстом, которые мы будем ограничивать по высоте. Для этого достаточно создать такой css стиль:

<style>
.scroll {
height: 200px;
overflow: auto;}
</style>

Он означает, что мы принудительно ставим главному блоку высоту в 200px и если содержимое внцутри него будет превышать это значение, то автоматически появится полоса прокрутки.

Чтобы полоса прокрутки была только по оси Y: overflow-y: auto; По оси X: overflow-x: auto; Если же необходимо, чтобы прокрутка была всегда включена, то пишите так: overflow-y: scroll; Данный подход, обычно используется на всех сайтах.

Но что, если требуется изменить толщину полосы прокрутки, ее цвет или убрать кнопки прокрутки? Тогда нужно использовать плагин jquery.jscrollpane.min.js на jQuery.

Подключается он очень быстро - 2-мя js скриптами: jquery.jscrollpane.min.js и jquery.mousewheel.js с минимальным количеством css, который вы найдете в примере ниже. jquery.mousewheel.js нужен, чтобы блок передвигался в прокрутке по движению колесика мыши. Если его удалить, то эффект пропадет.

Запускать скрипт очень просто - на класс, к которому нужно прикрепить полосу прокрутки напишите код:

<script type="text/javascript" id="sourcecode">
$(function() {
$('.scroll-pane').jScrollPane({ //На какой элемент задаем прокрутку
showArrows: false //показать стрелки
});
});
</script>

Чтобы менять внешний вид полосы прокрутки - просто меняйте css: цвет прокрутки, кнопок, ее толщина и многое другое.