Scrollable

В библиотеке Shopify Draggable модуль Scrollable предназначен для автоматического прокручивания контейнера или страницы при перетаскивании элементов к границам видимой области. Это особенно полезно при работе с длинными списками, таблицами или сетками, где элементы могут выходить за пределы текущей видимой области.

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

Scrollable не требует отдельной установки — он является плагином для основного класса Draggable. Для подключения достаточно импортировать плагин:

import { Draggable, Plugins } from '@shopify/draggable';

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  plugins: [Plugins.Scrollable]
});

Ключевым моментом является передача плагина в массив plugins при инициализации. Это автоматически активирует функционал прокрутки.

Основные опции Scrollable

Плагин Scrollable поддерживает несколько настраиваемых опций:

  • speed – скорость прокрутки в пикселях за один тик. Значение по умолчанию: 6.
  • sensitivity – расстояние от границы контейнера (в пикселях), при достижении которого прокрутка запускается. По умолчанию: 50.
  • scrollableElements – массив DOM-элементов, которые будут прокручиваться. По умолчанию это родительский контейнер Draggable. Если элемент не указан, прокрутка будет работать для окна документа.
  • horizontal и vertical – булевы значения, разрешающие прокрутку по горизонтали и вертикали соответственно. По умолчанию оба параметра включены.

Пример настройки:

const draggable = new Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  plugins: [Plugins.Scrollable],
  scrollable: {
    speed: 10,
    sensitivity: 40,
    scrollableElements: [document.querySelector('.draggable-container')],
    vertical: true,
    horizontal: false
  }
});

Принцип работы

Когда элемент перетаскивается и достигает зоны чувствительности около края контейнера:

  1. Плагин определяет направление движения.
  2. Вычисляет скорость прокрутки с учётом параметра speed.
  3. Выполняет плавное смещение содержимого контейнера или окна документа.
  4. Обновляет координаты перетаскиваемого элемента относительно новой позиции.

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

Настройка нескольких контейнеров

Scrollable поддерживает работу с несколькими контейнерами одновременно. Для этого в опции scrollableElements можно передать массив элементов:

scrollableElements: [
  document.querySelector('.container-1'),
  document.querySelector('.container-2')
]

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

Взаимодействие с другими плагинами Draggable

Scrollable совместим с большинством других плагинов Draggable, включая:

  • Sortable – при сортировке элементов внутри длинного списка прокрутка позволяет дотаскивать элементы до конца списка.
  • Swappable – при замене элементов между контейнерами прокрутка поддерживает плавное перемещение за пределы видимой области.
  • Mirror – визуальное отображение перетаскиваемого элемента обновляется синхронно с прокруткой, предотвращая разрывы или «подвисания» визуала.

Важно инициализировать плагины в правильном порядке, чтобы Scrollable не конфликтовал с вычислением позиции зеркала (Mirror) или placeholder.

Методы и события

Плагин предоставляет ограниченный набор публичных методов, но активно использует события Draggable:

  • drag:move – срабатывает на каждом шаге перемещения, позволяет вручную контролировать прокрутку при необходимости.
  • drag:start и drag:stop – можно использовать для активации или деактивации прокрутки в специфических условиях.

Прямого метода для включения/выключения прокрутки в API нет, но это можно реализовать через управление параметром scrollableElements во время работы.

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

  1. Оптимизация для больших списков: при больших контейнерах уменьшение speed и увеличение sensitivity делает прокрутку более предсказуемой.
  2. Избегание конфликта с тач-устройствами: при использовании на мобильных устройствах стоит проверять совместимость с touch-событиями, чтобы избежать рывков.
  3. Совместимость с CSS overflow: контейнеры должны иметь корректно заданное свойство overflow: auto или scroll, иначе прокрутка не будет работать.

Пример комплексного использования

const draggable = new Draggable(document.querySelectorAll('.list-container'), {
  draggable: '.list-item',
  plugins: [Plugins.Scrollable, Plugins.Sortable],
  scrollable: {
    speed: 8,
    sensitivity: 60,
    scrollableElements: [document.querySelector('.list-container')],
    vertical: true,
    horizontal: false
  }
});

draggable.on('drag:move', (event) => {
  console.log(`Перетаскиваем элемент: ${event.source.textContent}`);
});

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

Оглавление