scrollbarContainer

scrollbarContainer — это один из ключевых параметров конфигурации библиотеки Locomotive Scroll, отвечающий за привязку скролла к конкретному элементу DOM вместо стандартного окна браузера. Это позволяет реализовать кастомные прокрутки для отдельных блоков страницы, создавая более гибкую и управляемую анимацию скролла.

Подключение и инициализация

Для начала необходимо импортировать библиотеку и создать экземпляр Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  smartphone: { smooth: true },
  tablet: { smooth: true }
});

Чтобы использовать scrollbarContainer, достаточно добавить его в объект конфигурации:

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

В этом примере #custom-scrollbar — это элемент, в котором будет отрисовываться кастомная полоса прокрутки.

Структура HTML для работы с scrollbarContainer

Для корректной работы необходимо правильно организовать HTML:

<div id="scroll-container">
  <section>Контент секции 1</section>
  <section>Контент секции 2</section>
  <section>Контент секции 3</section>
</div>

<div id="custom-scrollbar"></div>
  • #scroll-container — основной контейнер скролла.
  • #custom-scrollbar — контейнер, внутри которого Locomotive Scroll будет отображать прокрутку.

Важно: контейнер для скроллбара должен находиться вне основного скролл-контейнера, иначе визуальные эффекты будут нарушены.

Поведение и особенности

  1. Привязка к элементу scrollbarContainer позволяет ограничить область прокрутки отдельным элементом. Это особенно полезно для модальных окон, сайдбаров или вертикальных блоков с фиксированной шириной.

  2. Поддержка гладкой прокрутки Даже если основной скролл осуществляется через кастомный контейнер, плавная прокрутка (smooth: true) сохраняется.

  3. Обновление размеров При динамическом изменении контента или размеров контейнера необходимо вызывать метод update():

scroll.update();

Это гарантирует корректное отображение полосы прокрутки в scrollbarContainer.

Работа с событиями скролла

Использование scrollbarContainer не ограничивает доступ к событиям скролла:

scroll.on('scroll', (obj) => {
  console.log('Позиция скролла:', obj.scroll.y);
});
  • obj.scroll.y — текущая вертикальная позиция.
  • obj.currentElements — элементы, отмеченные через data-scroll, которые в данный момент видимы.

События работают так же, как и при использовании стандартного окна, что позволяет создавать сложные анимации и эффекты на основе положения прокрутки.

Кастомизация внешнего вида скроллбара

scrollbarContainer полностью отделяет визуальный компонент от основного скролла. Для стилизации можно использовать CSS:

#custom-scrollbar {
  position: fixed;
  right: 10px;
  top: 0;
  width: 6px;
  height: 100%;
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

#custom-scrollbar .c-scrollbar_thumb {
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
}
  • .c-scrollbar_thumb — внутренний элемент, который перемещается при скролле.
  • Можно менять цвет, ширину, прозрачность и добавлять анимации.

Ограничения и рекомендации

  • Контейнер скролла должен иметь фиксированную высоту или ширину, чтобы Locomotive Scroll корректно рассчитал позиции.
  • Не рекомендуется использовать несколько scrollbarContainer на одной странице для одного и того же el, так как это может вызвать конфликт обновлений.
  • При использовании scrollbarContainer внутри Flexbox или Grid-блоков нужно убедиться, что родительский элемент корректно растягивается по нужной оси.

Практические кейсы

  1. Сайдбар с отдельным скроллом
<div class="sidebar" id="sidebar-scroll">
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</div>
const sidebarScroll = new LocomotiveScroll({
  el: document.querySelector('#sidebar-scroll'),
  smooth: true,
  scrollbarContainer: document.querySelector('#sidebar-scrollbar')
});
  1. Модальные окна с внутренним скроллом Позволяет реализовать плавную прокрутку без влияния на основной контент страницы.

Методы, влияющие на scrollbarContainer

  • scroll.update() — пересчитывает размеры скролл-контейнера и положения полосы прокрутки.
  • scroll.scrollTo(target, options) — можно прокручивать к определённому элементу внутри кастомного контейнера.
  • scroll.destroy() — удаляет все слушатели и сбрасывает кастомный скролл, включая scrollbarContainer.

Использование scrollbarContainer в Locomotive Scroll открывает возможность создания полностью независимых областей прокрутки с индивидуальной стилизацией, плавной анимацией и полной интеграцией с событиями скролла, что делает интерфейсы современными и интерактивными.

Оглавление