Опубликовано: 04.01.2019

Стилизованный scrollbar на jQuery

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

Установка плагина Scroller

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

Подключение CSS:

<link rel="stylesheet" href="scroller.css">

Подключение Javascript:

<script src="core.js"></script>
<script src="touch.js"></script>
<script src="scrollbar.js"></script>

Использование плагина Scroller

После подключения всех необходимых файлов можно приступать к работе с плагином. В моём случае я буду использовать плагин для стилизации горизонтального ползунка блоков с классом responsive.

HTML:

<div class="responsive"></div>

Javascript:

$(".responsive").scrollbar({
  "horizontal": true
});

Результат работы плагина представлен на изображении ниже.

Как видим, ползунок заработал, но нас не устраивает его внешний вид. Уберём верхнюю чёрную рамку, изменим размеры и цвет самого ползунка.

CSS:

.fs-scrollbar-horizontal .fs-scrollbar-bar {
  border: 0;
}
.fs-scrollbar-handle {
  background: #7fce00;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  height: 8px;
}
.fs-scrollbar-handle:focus {
  outline: none;
}

В итоге получим следующую картину:

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

Javascript:

$(".responsive").scrollbar({
  "horizontal": true,
  "handleSize": 100,
});

Полный список параметров вы можете найти на официальном сайте разработчиков плагина Scroller.

Обсуждение

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