Настройка автопрокрутки

Interact.js предоставляет мощные возможности для управления интерактивными элементами, включая перетаскивание, масштабирование и жесты. Одной из ключевых функций при работе с перетаскиваемыми элементами является автопрокрутка — автоматическое смещение контейнера или окна при достижении краёв видимой области. Эта функциональность особенно полезна для реализации drag-and-drop интерфейсов с длинными списками или крупными канвасами.

Включение автопрокрутки

Для активации автопрокрутки используется параметр autoscroll в методе draggable():

interact('.draggable').draggable({
  autoscroll: true
});

По умолчанию autoscroll равен false, что означает, что элементы не будут автоматически прокручиваться при достижении края контейнера. Установка true включает базовую прокрутку, но Interact.js также позволяет детально настроить поведение автопрокрутки через объект с параметрами.

Настройка параметров автопрокрутки

Свойство autoscroll может принимать объект с расширенными настройками:

interact('.draggable').draggable({
  autoscroll: {
    container: document.getElementById('scroll-container'),
    margin: 50,
    speed: 300,
    interval: 10
  }
});

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

  • container — элемент DOM, который будет прокручиваться. По умолчанию используется window.
  • margin — расстояние в пикселях от края контейнера, при достижении которого начнётся прокрутка. Чем меньше значение, тем ближе к краю нужно подвести курсор.
  • speed — скорость прокрутки в пикселях за секунду. Позволяет контролировать плавность движения.
  • interval — интервал обновления прокрутки в миллисекундах. Чем меньше интервал, тем более отзывчивая прокрутка, но выше нагрузка на рендеринг.

Автопрокрутка в горизонтальном и вертикальном направлениях

Interact.js поддерживает автопрокрутку как по вертикали, так и по горизонтали. Прокрутка происходит в зависимости от положения указателя относительно краёв контейнера.

interact('.draggable').draggable({
  autoscroll: {
    container: document.getElementById('scroll-container'),
    margin: 50,
    speed: 400
  }
});

Если необходимо ограничить прокрутку только по одному направлению, можно использовать CSS-свойства контейнера или динамически управлять поведением через события dragmove.

Использование автопрокрутки с вложенными контейнерами

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

interact('.draggable').draggable({
  autoscroll: {
    container: document.querySelector('.inner-scroll'),
    margin: 30,
    speed: 200
  }
});

Если container не указан, библиотека попытается прокручивать ближайший прокручиваемый родительский элемент. Это может привести к неожиданному поведению при глубокой вложенности элементов.

Динамическое включение и отключение автопрокрутки

Interact.js позволяет изменять параметры автопрокрутки во время перетаскивания:

interact('.draggable').draggable({
  listeners: {
    start(event) {
      event.interactable.draggable({ autoscroll: { speed: 500 } });
    },
    end(event) {
      event.interactable.draggable({ autoscroll: false });
    }
  }
});

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

Контроль за производительностью

Автопрокрутка может создавать значительную нагрузку при работе с большим количеством элементов или частой отрисовкой. Рекомендации для оптимизации:

  • Использовать минимально необходимый interval.
  • Ограничивать область прокрутки через container.
  • Избегать высоких значений speed, если прокрутка сопровождается тяжелыми вычислениями или анимациями.

Комбинация с другими функциями Interact.js

Автопрокрутка полностью совместима с:

  • snap — привязкой элементов к сетке или другим объектам.
  • restrict — ограничением перемещения внутри заданной области.
  • inertia — плавным скольжением элементов после отпускания.

Это позволяет создавать сложные и отзывчивые интерфейсы drag-and-drop с точным управлением перемещением и видимой областью.

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

interact('.draggable')
  .draggable({
    inertia: true,
    restrict: {
      restriction: 'parent',
      endOnly: true
    },
    autoscroll: {
      container: document.getElementById('scroll-container'),
      margin: 40,
      speed: 250,
      interval: 15
    }
  })
  .on('dragmove', function(event) {
    const target = event.target;
    target.style.transform =
      `translate(${event.pageX}px, ${event.pageY}px)`;
  });

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

Оглавление