Параметр scroller

В библиотеке Headroom.js параметр scroller отвечает за определение элемента, на основе скролла которого будет происходить показ или скрытие шапки страницы. По умолчанию библиотека использует глобальный объект window, то есть отслеживает вертикальный скролл всего документа.

Использование параметра scroller

scroller задается при создании экземпляра Headroom через объект конфигурации:

var myElement = document.querySelector("header");
var headroom = new Headroom(myElement, {
    scroller: document.querySelector(".scrollable-container"),
    tolerance: 5,
    offset: 50
});
headroom.init();

В этом примере вместо глобального скролла документа, Headroom будет реагировать на скролл контейнера .scrollable-container. Это особенно полезно при работе с элементами с внутренней прокруткой, например:

  • Модальные окна с прокручиваемым контентом.
  • Списки сообщений внутри чата.
  • Параллельные скроллы внутри панелей интерфейса.

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

  1. Гибкость выбора элемента Параметр scroller может принимать любой DOM-элемент, который поддерживает события scroll. Это позволяет подключать Headroom к отдельным контейнерам, не завися от основного окна документа.

  2. Производительность Использование конкретного контейнера вместо window снижает нагрузку на глобальный скролл и предотвращает лишние срабатывания при прокрутке всей страницы.

  3. Сочетание с другими параметрами scroller часто комбинируется с offset и tolerance для тонкой настройки поведения шапки:

    • offset задает минимальное смещение скролла, после которого шапка начинает скрываться или показываться.
    • tolerance задает порог в пикселях, при котором скролл считается значимым.
var container = document.querySelector(".content-wrapper");
var headroom = new Headroom(container, {
    scroller: container,
    offset: 100,
    tolerance: {
        up: 10,
        down: 5
    }
});
headroom.init();

В этом примере шапка будет реагировать на скролл контейнера .content-wrapper, скрываясь после смещения в 100 пикселей и учитывая разные пороги для скролла вверх и вниз.

Советы по использованию

  • Для элементов с горизонтальным скроллом параметр scroller не работает корректно — Headroom ориентирован на вертикальное смещение.
  • Если элемент с прокруткой появляется динамически, его нужно передать в scroller после вставки в DOM, иначе Headroom не сможет корректно отслеживать скролл.
  • Использование scroller с виртуализированными списками требует учета обновления размера контейнера, иначе шапка может реагировать неправильно.

Практический пример

<div class="scrollable-container" style="height: 400px; overflow-y: scroll;">
    <header class="site-header">Заголовок</header>
    <div class="content">
        <!-- большой объем контента -->
    </div>
</div>

<script>
var container = document.querySelector(".scrollable-container");
var header = container.querySelector(".site-header");

var headroom = new Headroom(header, {
    scroller: container,
    offset: 50,
    tolerance: 5
});
headroom.init();
</script>

В этом примере шапка страницы скрывается и появляется на основе прокрутки именно контейнера .scrollable-container, не влияя на другие элементы страницы.

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

  • Параметр scroller не влияет на вычисление размеров шапки или позиционирование — это исключительно источник события скролла.
  • Если элемент имеет нестандартное позиционирование (position: fixed или absolute), необходимо проверять, что скролл внутри контейнера корректно передается событию.
  • Для мобильных устройств важно учитывать, что события scroll могут срабатывать иначе, и иногда требуется дополнительная настройка tolerance для плавного скрытия/показа.

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

Оглавление