Стилизованный 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.

Понравилась статья? Поделись: