scroll и scrollSensitivity

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

scroll

Параметр scroll отвечает за автоматическую прокрутку контейнера или окна, когда перетаскиваемый элемент приближается к краю прокручиваемой области. Он принимает булево значение (true или false) или конкретный DOM-элемент.

  • true — библиотека будет автоматически прокручивать родительский скроллируемый контейнер или окно браузера при необходимости.
  • false — автоматическая прокрутка отключена.
  • DOM-элемент — прокрутка будет применяться только к указанному элементу, что удобно для внутреннего скролла контейнера.

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

const sortable = new Sortable(list, {
    scroll: true
});

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

Если требуется ограничить прокрутку только определённым контейнером, используется:

const container = document.getElementById('scrollable-container');
const sortable = new Sortable(container, {
    scroll: container
});

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

scrollSensitivity

Параметр scrollSensitivity определяет расстояние в пикселях от края контейнера, при котором начинается автоматическая прокрутка. Значение по умолчанию — 30.

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

Пример:

const sortable = new Sortable(list, {
    scroll: true,
    scrollSensitivity: 60
});

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

Взаимодействие scroll и scrollSpeed

Для полноценного контроля над прокруткой существует параметр scrollSpeed, который задаёт скорость прокрутки в пикселях за кадр.

Пример настройки всей системы:

const sortable = new Sortable(list, {
    scroll: true,
    scrollSensitivity: 50,
    scrollSpeed: 15
});
  • scrollSensitivity: 50 — прокрутка активируется на 50 пикселей от края.
  • scrollSpeed: 15 — контейнер или окно будет прокручиваться на 15 пикселей за один шаг анимации.

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

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

  1. Использовать scroll только при необходимости. Для коротких списков прокрутка может быть лишней и создавать ненужные эффекты.
  2. Настраивать scrollSensitivity под конкретный интерфейс. Для небольших элементов лучше увеличить чувствительность, чтобы не приходилось доводить курсор до самого края.
  3. Проверять совместимость с внутренними контейнерами. Если список находится внутри скроллируемого блока, важно указать этот блок как целевой элемент scroll, иначе прокрутка будет работать некорректно.
  4. Комбинировать с scrollSpeed для управления скоростью прокрутки, особенно если контейнер большой или элементы мелкие.

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

Оглавление