scrollSpeed и bubbleScroll

SortableJS — это мощная библиотека для реализации перетаскивания элементов на веб-странице. Среди множества опций выделяются параметры, управляющие прокруткой при перетаскивании: scrollSpeed и bubbleScroll. Их корректная настройка позволяет улучшить UX при работе с длинными списками или сложными интерфейсами с вложенными контейнерами.

scrollSpeed

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

Синтаксис:

new Sortable(el, {
  scroll: true,
  scrollSpeed: 10
});
  • Тип значения: Number
  • Единицы измерения: пиксели в кадр (px/frame)
  • Значение по умолчанию: 10

Особенности работы:

  • Если scrollSpeed равен 0, прокрутка отключена.
  • Большие значения увеличивают скорость прокрутки, но могут сделать перемещение менее управляемым.
  • Скорость прокрутки применяется только к контейнерам с включенной опцией scroll: true.

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

const sortable = new Sortable(list, {
  animation: 150,
  scroll: true,
  scrollSpeed: 20
});

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

bubbleScroll

bubbleScroll определяет, будет ли прокрутка происходить только в текущем контейнере или она сможет “всплывать” вверх по иерархии родительских элементов.

Синтаксис:

new Sortable(el, {
  scroll: true,
  bubbleScroll: true
});
  • Тип значения: Boolean
  • Значение по умолчанию: true

Особенности работы:

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

Пример использования с вложенными контейнерами:

const nestedSortable = new Sortable(nestedList, {
  scroll: true,
  scrollSensitivity: 30,
  scrollSpeed: 15,
  bubbleScroll: true
});

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

Совместное использование scrollSpeed и bubbleScroll

Параметры scrollSpeed и bubbleScroll тесно связаны:

  1. scrollSpeed определяет, с какой скоростью контейнер будет прокручиваться, независимо от того, является ли это текущий или родительский контейнер.
  2. bubbleScroll определяет, можно ли распространять прокрутку на родительские элементы при достижении границ текущего контейнера.

Пример:

const sortable = new Sortable(complexList, {
  animation: 200,
  scroll: true,
  scrollSpeed: 25,
  bubbleScroll: true
});

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

Практические советы

  • Для длинных списков лучше использовать значения scrollSpeed в диапазоне 10–30 px/frame, чтобы избежать слишком резкой прокрутки.
  • Вложенные списки и модальные окна требуют включенного bubbleScroll, иначе элемент может “застрять” на границе внутреннего контейнера.
  • scrollSensitivity в комбинации с scrollSpeed позволяет тонко настроить момент, когда начинается прокрутка, делая интерфейс более предсказуемым.
new Sortable(list, {
  scroll: true,
  scrollSpeed: 20,
  scrollSensitivity: 40,
  bubbleScroll: true
});
  • scrollSensitivity задаёт расстояние до границы контейнера, при котором начинается прокрутка. Чем выше значение, тем раньше контейнер начинает скролл.

Эти параметры делают SortableJS гибким инструментом для интерфейсов с динамическими списками и множеством уровней вложенности. Правильная комбинация scrollSpeed и bubbleScroll обеспечивает плавное и предсказуемое перемещение элементов, особенно при работе с длинными или сложными структурами DOM.

Оглавление