Скорость прокрутки

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

Настройка скроллинга при перетаскивании

Для включения автоматической прокрутки используется модуль autoScroll. Его основной параметр — скорость прокрутки (speed). Значение скорости задается в пикселях в секунду, что позволяет точно контролировать, насколько быстро контейнер будет прокручиваться при приближении перетаскиваемого объекта к краю.

Пример базовой конфигурации:

interact('.draggable')
  .draggable({
    inertia: true,
    autoScroll: {
      container: document.body,
      margin: 50,
      speed: 400
    }
  });

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

  • container — элемент, внутри которого происходит скроллинг. Если указан document.body, прокручивается вся страница.
  • margin — расстояние в пикселях от края контейнера, при достижении которого запускается прокрутка.
  • speed — максимальная скорость прокрутки.

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

Interact.js позволяет изменять скорость прокрутки в реальном времени через функцию autoScroll.speed. Это полезно для создания адаптивного поведения: чем ближе объект к краю, тем выше скорость.

interact('.draggable').draggable({
  inertia: true,
  autoScroll: {
    container: document.body,
    margin: 50,
    speed: function (dragEvent) {
      const distance = Math.min(
        dragEvent.clientY - dragEvent.target.getBoundingClientRect().bottom,
        100
      );
      return Math.max(100, distance * 5);
    }
  }
});

В этом примере скорость вычисляется на основе расстояния от границы элемента до края окна. Минимальное значение — 100 px/сек, максимальное растет пропорционально приближению к краю.

Ограничение максимальной скорости

Чтобы избежать слишком резкой прокрутки, Interact.js поддерживает ограничение максимальной скорости через свойство maxSpeed.

interact('.draggable').draggable({
  inertia: true,
  autoScroll: {
    container: document.body,
    margin: 50,
    speed: 600,
    maxSpeed: 1000
  }
});

Важное отличие: speed задает базовую скорость, а maxSpeed ограничивает её значение при динамическом расчете. Это особенно полезно для интерфейсов с длинными списками или большими контейнерами.

Прокрутка при масштабировании и инерции

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

Пример с инерцией:

interact('.draggable').draggable({
  inertia: {
    resistance: 10,
    minSpeed: 200,
    endSpeed: 50
  },
  autoScroll: {
    container: document.body,
    margin: 50,
    speed: 500
  }
});
  • resistance определяет, как быстро объект замедляется.
  • minSpeed — минимальная скорость инерции, ниже которой прокрутка не запускается.
  • endSpeed — скорость, при которой движение завершается полностью.

Применение в сложных интерфейсах

Использование настройки скорости прокрутки особенно эффективно в:

  • Длинных списках и таблицах, где элементы могут выходить за границы видимости.
  • Драг-н-дроп конструкторах с многоуровневыми контейнерами.
  • Визуальных редакторах, где объекты могут перемещаться на большие расстояния.

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

Настройка индивидуальной скорости для разных элементов

Interact.js позволяет назначать разные значения скорости для разных типов элементов, используя функцию конфигурации:

interact('.draggable').draggable({
  autoScroll: {
    container: document.body,
    margin: 50,
    speed: function (dragEvent) {
      return dragEvent.target.classList.contains('fast-scroll') ? 800 : 400;
    }
  }
});

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

Оглавление