Кастомизация скроллбара

В библиотеке Locomotive Scroll скроллбар не является нативным элементом браузера. Он полностью контролируется JavaScript и рендерится поверх контента, что позволяет гибко настраивать внешний вид и поведение.

По умолчанию библиотека добавляет кастомный контейнер скроллбара внутрь корневого элемента с атрибутом data-scroll-container. Этот элемент получает класс:

.c-scrollbar

Внутри него располагается ползунок:

.c-scrollbar_thumb

Это основа для всей дальнейшей кастомизации.

Структура DOM-элементов скроллбара

После инициализации создаётся следующая структура:

<div class="c-scrollbar">
  <div class="c-scrollbar_thumb"></div>
</div>

В случае горизонтального скролла добавляется модификатор:

<div class="c-scrollbar c-scrollbar_horizontal">

Ключевые особенности:

  • Скроллбар не зависит от overflow
  • Позиция обновляется через transform
  • Размер ползунка рассчитывается динамически

Базовая стилизация через CSS

Стилизация начинается с переопределения стандартных классов.

Контейнер скроллбара

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: transparent;
}

Основные параметры:

  • width — ширина скроллбара
  • background — фон контейнера
  • position — обычно absolute

Ползунок

.c-scrollbar_thumb {
  background-color: #000;
  width: 100%;
  border-radius: 4px;
}

Настраиваемые свойства:

  • цвет (background-color)
  • радиус (border-radius)
  • прозрачность (opacity)
  • эффекты (box-shadow)

Анимация появления и скрытия

Скроллбар можно делать динамическим, скрывая его вне взаимодействия.

.c-scrollbar {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

Классы:

  • .has-scroll-scrolling — активный скролл
  • .has-scroll-dragging — перетаскивание

Это позволяет реализовать поведение, аналогичное macOS.

Кастомизация через JavaScript

Инициализация с параметрами:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  scrollbarContainer: document.querySelector('#custom-scrollbar')
});

Параметр:

  • scrollbarContainer — позволяет вынести скроллбар в отдельный DOM-узел

Полная замена контейнера скроллбара

Создание собственного контейнера:

<div id="custom-scrollbar"></div>

И подключение:

scrollbarContainer: document.getElementById('custom-scrollbar')

Это позволяет:

  • размещать скроллбар вне основного контейнера
  • создавать сложные UI-композиции
  • интегрировать скроллбар в фиксированные панели

Кастомное позиционирование

Скроллбар можно переместить в любое место интерфейса:

.c-scrollbar {
  left: 20px;
  right: auto;
}

Или сделать горизонтальным:

.c-scrollbar_horizontal {
  bottom: 0;
  height: 6px;
  width: 100%;
}

Изменение поведения при наведении

Добавление интерактивности:

.c-scrollbar_thumb:hover {
  background-color: #ff0000;
  cursor: pointer;
}

Также можно изменить размер:

.c-scrollbar:hover {
  width: 12px;
}

Управление через события

Библиотека предоставляет доступ к событиям скролла:

scroll.on('scroll', (args) => {
  console.log(args.scroll.y);
});

Это позволяет:

  • синхронизировать внешний UI
  • создавать кастомные индикаторы прогресса
  • управлять состоянием скроллбара

Реализация прогресс-бара

Пример кастомного скроллбара в виде прогресс-линии:

<div class="progress-bar"></div>
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: black;
  width: 0%;
}
scroll.on('scroll', ({ scroll, limit }) => {
  const progress = scroll.y / limit.y;
  document.querySelector('.progress-bar').style.width = `${progress * 100}%`;
});

Стилизация с использованием CSS-переменных

Для удобства масштабирования:

:root {
  --scrollbar-width: 8px;
  --scrollbar-color: #111;
}

.c-scrollbar {
  width: var(--scrollbar-width);
}

.c-scrollbar_thumb {
  background-color: var(--scrollbar-color);
}

Создание минималистичного скроллбара

.c-scrollbar {
  width: 2px;
  background: transparent;
}

.c-scrollbar_thumb {
  background: rgba(0, 0, 0, 0.5);
}

Подходит для:

  • лендингов
  • портфолио
  • визуально чистых интерфейсов

Создание “толстого” UI-скроллбара

.c-scrollbar {
  width: 16px;
  background: #f0f0f0;
}

.c-scrollbar_thumb {
  background: #333;
  border-radius: 8px;
}

Используется в:

  • админ-панелях
  • сложных интерфейсах
  • приложениях с большим количеством контента

Добавление тени и глубины

.c-scrollbar_thumb {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

Или внешняя тень:

.c-scrollbar {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Кастомизация для тёмной темы

body.dark .c-scrollbar_thumb {
  background-color: #fff;
}

body.dark .c-scrollbar {
  background-color: rgba(255,255,255,0.1);
}

Отключение скроллбара

Полное скрытие:

.c-scrollbar {
  display: none;
}

Или через настройки:

scrollbar: false

Ограничения и особенности

  • Скроллбар не является нативным, поэтому:

    • не поддерживает системные настройки пользователя
    • требует ручной адаптации под accessibility

  • Производительность зависит от transform и requestAnimationFrame

  • Не работает корректно без smooth: true

Практические рекомендации

  • Использование прозрачности делает интерфейс легче
  • Минимальная ширина — 4–6px для удобства
  • Hover-эффекты повышают UX
  • Отдельный контейнер — для сложных интерфейсов
  • Синхронизация с анимациями усиливает визуальный эффект
Оглавление