AutoScroll

AutoScroll — это встроенная функция библиотеки SortableJS, которая позволяет автоматически прокручивать контейнеры при перетаскивании элементов к их границам. Она особенно полезна при работе с длинными списками или элементами внутри прокручиваемых контейнеров. Без этой функции пользователь столкнулся бы с ограничением видимой области и невозможностью перемещать элементы за пределы текущего видимого пространства.

Основные принципы работы

AutoScroll активируется автоматически при перетаскивании элемента к границам контейнера или окна браузера. Библиотека отслеживает позицию курсора относительно контейнера и запускает прокрутку в направлении, где курсор находится ближе к границе.

  • Направления прокрутки: вверх, вниз, влево, вправо.
  • Контейнеры: как глобальные (window), так и локальные (div с overflow: auto или overflow: scroll).

При активации AutoScroll создается плавное движение, предотвращающее резкие «скачки» элементов и обеспечивающее удобство перетаскивания.

Настройка AutoScroll

Настройка происходит через объект options при инициализации Sortable. Ключевые параметры:

new Sortable(container, {
    group: "shared",
    animation: 150,
    scroll: true,
    scrollSensitivity: 30,
    scrollSpeed: 10,
    bubbleScroll: true
});

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

  • scroll — включает или отключает автоматическую прокрутку. Значение true активирует стандартный механизм.
  • scrollSensitivity — определяет, на каком расстоянии от границы контейнера начнется прокрутка. Чем меньше значение, тем ближе к границе курсор должен находиться.
  • scrollSpeed — скорость прокрутки в пикселях за один шаг анимации. Высокие значения ускоряют прокрутку, низкие делают её более плавной.
  • bubbleScroll — позволяет прокручивать родительские контейнеры, если вложенный контейнер достиг границы. Полезно для многоуровневых интерфейсов с вложенными списками.

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

  1. Прокрутка окна браузера при перетаскивании элемента на край страницы:
new Sortable(document.body, {
    animation: 150,
    scroll: true,
    scrollSensitivity: 50,
    scrollSpeed: 20
});
  • Когда элемент достигает края окна, окно автоматически прокручивается в нужном направлении.
  • Значение scrollSensitivity в 50 пикселей обеспечивает раннее начало прокрутки, предотвращая «залипание» курсора.
  1. Прокрутка локального контейнера:
const list = document.getElementById('scrollable-list');
new Sortable(list, {
    animation: 200,
    scroll: true,
    scrollSensitivity: 40,
    scrollSpeed: 15
});
  • Контейнер с вертикальной прокруткой будет автоматически двигаться при приближении курсора к верхнему или нижнему краю.
  • Параметр animation сглаживает перемещение элементов внутри контейнера.
  1. Многоуровневая прокрутка с bubbleScroll:
new Sortable(nestedList, {
    scroll: true,
    scrollSensitivity: 30,
    scrollSpeed: 12,
    bubbleScroll: true
});
  • Если курсор достигнет нижней границы вложенного списка, прокрутка будет распространяться на родительский контейнер, создавая естественное движение в глубоко вложенных интерфейсах.

Важные особенности и рекомендации

  • Производительность: высокая скорость прокрутки и малое scrollSensitivity могут создавать нагрузку на рендеринг, особенно при больших списках. Оптимальные значения зависят от размера элементов и контейнера.
  • Контейнер с нестандартным overflow: AutoScroll корректно работает только с контейнерами, у которых явно указан overflow: auto или scroll. Прокрутка без этих свойств невозможна.
  • Смешанные направления: библиотека поддерживает одновременную горизонтальную и вертикальную прокрутку. Например, в сетках или таблицах можно перемещать элементы по диагонали.
  • События при прокрутке: можно использовать события onMove, onEnd и другие для динамического контроля поведения при автоскролле. Например, отключить прокрутку в определенных случаях или изменить направление.

Тонкости реализации

  1. Калькуляция позиции курсора: SortableJS вычисляет координаты курсора относительно контейнера и проверяет, попадает ли он в область scrollSensitivity у края. Это позволяет запускать прокрутку только при необходимости.
  2. Интервалы прокрутки: движение происходит с шагами, зависящими от scrollSpeed. При остановке курсора на месте интервал прекращается.
  3. Прерывание прокрутки: если элемент покидает зону scrollSensitivity, автоскролл автоматически останавливается, предотвращая бесконечное движение контейнера.
  4. Интеграция с drag-and-drop: AutoScroll полностью синхронизирован с анимацией animation, что исключает рассинхронизацию движения элемента и контейнера.

Советы по применению

  • Для длинных вертикальных списков рекомендуется использовать scrollSensitivity от 30 до 50 пикселей, а scrollSpeed 10–15 для комфортной прокрутки.
  • Для сложных интерфейсов с вложенными контейнерами обязательно включать bubbleScroll.
  • Не следует задавать слишком большую скорость, чтобы не потерять контроль над элементом при перетаскивании.
  • В мобильных браузерах автоскролл может работать медленнее из-за особенностей тач-событий; рекомендуется тестировать на всех целевых устройствах.

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

Оглавление