Scroll при перетаскивании

Shopify Draggable предоставляет мощный инструмент для создания интерактивного перетаскивания элементов на веб-странице. Одной из ключевых задач при работе с длинными списками или контейнерами, превышающими видимую область, является автоскролл — автоматическая прокрутка контейнера или страницы во время перетаскивания элементов к краям видимой области.

Настройка автоскролла

Для включения автоскролла в Draggable используется Scrollable Plugin, который подключается отдельно и расширяет базовую функциональность Draggable. Подключение выглядит следующим образом:

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

const container = document.querySelector('.draggable-container');

const draggable = new Draggable(container, {
  draggable: '.draggable-item',
  delay: 100, // задержка перед началом перетаскивания
  plugins: [Plugins.Scrollable],
  scrollable: {
    speed: 5, // скорость прокрутки
    sensitivity: 80, // расстояние до края контейнера, при котором начинается скролл
  },
});

Пояснение параметров Scrollable:

  • speed — определяет, насколько быстро контейнер или страница прокручивается при приближении элемента к краю.
  • sensitivity — расстояние в пикселях от края контейнера или окна, при котором срабатывает автоскролл.
  • container (опционально) — конкретный контейнер, в пределах которого будет происходить скроллирование; если не указан, используется window.

Поведение автоскролла

Draggable автоматически отслеживает положение активного элемента (элемента, который перетаскивается) относительно границ видимой области. Скролл срабатывает только если активный элемент пересекает область чувствительности (sensitivity) с любой стороны: сверху, снизу, слева или справа.

Например, если элемент перемещается к нижней границе контейнера и расстояние до края меньше sensitivity, контейнер начнет плавно прокручиваться вниз. Прокрутка продолжается до тех пор, пока элемент не окажется в безопасной зоне или пока перетаскивание не завершится.

Автоскролл для горизонтальных и вертикальных списков

Draggable поддерживает горизонтальный и вертикальный скролл. Для этого необходимо правильно настроить контейнер и элементы:

const horizontalContainer = document.querySelector('.draggable-horizontal');

const draggableHorizontal = new Draggable(horizontalContainer, {
  draggable: '.draggable-item',
  plugins: [Plugins.Scrollable],
  scrollable: {
    speed: 8,
    sensitivity: 50,
    vertical: false, // отключаем вертикальную прокрутку
    horizontal: true, // включаем горизонтальную прокрутку
  },
});
  • vertical и horizontal — позволяют включать или отключать скролл по соответствующим осям.
  • Комбинация этих параметров делает Draggable гибким инструментом для списков любого направления.

Контейнер с нестандартной прокруткой

В случаях, когда контейнер имеет нестандартные стили прокрутки (overflow: auto или кастомные скролл-бары), важно явно указать контейнер в настройках Scrollable:

scrollable: {
  container: document.querySelector('.custom-scroll-container'),
  speed: 6,
  sensitivity: 100,
}

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

Управление событиями автоскролла

Draggable позволяет отслеживать начало и окончание скролла через события:

draggable.on('scroll:start', (event) => {
  console.log('Начало автоскролла', event);
});

draggable.on('scroll:stop', (event) => {
  console.log('Окончание автоскролла', event);
});

Использование этих событий полезно для:

  • Визуальных индикаторов прокрутки.
  • Подстройки поведения других компонентов страницы.
  • Управления производительностью при больших списках.

Советы по оптимизации

  1. Скорость и чувствительность: слишком высокая скорость или чувствительность может вызвать резкую или непредсказуемую прокрутку. Рекомендуется начинать с speed: 5–6 и sensitivity: 50–80.
  2. Тестирование на разных устройствах: автоскролл ведет себя по-разному на мобильных и десктопных устройствах. Для тач-скринов можно использовать дополнительные плагины или слушатели тач-событий.
  3. Комбинация с другими плагинами: Scrollable хорошо сочетается с Sortable и Swappable, обеспечивая плавное перетаскивание даже в длинных списках.
  4. Сложные контейнеры: если контейнеры вложены друг в друга, рекомендуется явно указывать, какой контейнер контролирует скролл, чтобы избежать конфликтов.

Пример полной конфигурации

const listContainer = document.querySelector('.draggable-list');

const draggableList = new Draggable(listContainer, {
  draggable: '.item',
  delay: 150,
  plugins: [Plugins.Sortable, Plugins.Scrollable],
  scrollable: {
    container: listContainer,
    speed: 7,
    sensitivity: 60,
    vertical: true,
    horizontal: false,
  },
});

draggableList.on('scroll:start', () => console.log('Прокрутка началась'));
draggableList.on('scroll:stop', () => console.log('Прокрутка остановлена'));

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

Автоскролл в Shopify Draggable — критически важная функция для удобного взаимодействия с длинными списками и крупными интерфейсными элементами. Правильная настройка параметров speed, sensitivity и container позволяет создавать естественный и отзывчивый опыт перетаскивания, независимо от размера и ориентации контейнера.

Оглавление