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

Механизм прокрутки в Velocity.js основан на анимации числовых свойств scrollTop и scrollLeft, а также на специализированной команде scroll, которая абстрагирует работу с DOM-контейнерами и окном браузера. В отличие от стандартного window.scrollTo, библиотека добавляет поддержку очередей анимаций, плавных кривых ускорения и синхронизации с другими эффектами.

Прокрутка рассматривается как обычная анимация CSS-подобного свойства, где целевое значение задаётся числом, а текущее состояние интерполируется во времени.

Базовая анимация вертикальной прокрутки

Основной способ управления вертикальной прокруткой заключается в изменении свойства scrollTop у элементов-контейнеров:

$("html, body").velocity({ scrollTop: 500 }, 800);

В данной модели:

  • html, body — универсальная связка для обеспечения кроссбраузерной совместимости
  • scrollTop: 500 — целевая позиция прокрутки в пикселях
  • 800 — длительность анимации в миллисекундах

Velocity автоматически распределяет управление между элементами документа в зависимости от браузера.

Горизонтальная прокрутка

Для горизонтального скролла используется свойство scrollLeft:

$("#container").velocity({ scrollLeft: 300 }, 600);

Особенность горизонтальной прокрутки заключается в том, что она чаще применяется к ограниченным контейнерам с overflow-x: scroll, а не к глобальному окну документа.

Команда scroll как специализированный режим

Velocity.js включает специализированный режим scroll, который упрощает работу с прокруткой и автоматически вычисляет направление движения.

$("#section3").velocity("scroll", 1000);

При таком вызове элемент прокручивается в видимую область окна браузера. Библиотека самостоятельно вычисляет необходимое значение scrollTop.

Расширенная форма:

$("#section3").velocity("scroll", {
  duration: 1200,
  offset: -50
});

Смещение (offset) и позиционирование точки прокрутки

Свойство offset позволяет корректировать конечную позицию прокрутки относительно элемента:

$("#header").velocity("scroll", {
  duration: 700,
  offset: -100
});

Логика применения:

  • отрицательное значение смещает позицию выше элемента
  • положительное значение смещает ниже
  • используется для компенсации фиксированных шапок интерфейса

При динамических интерфейсах offset часто задаётся функцией:

$("#block").velocity("scroll", {
  offset: function() {
    return -$(".navbar").outerHeight();
  }
});

Анимация прокрутки окна и документа

Окно браузера и документ рассматриваются как единый scroll-контейнер. На практике применяется связка:

$("html, body").velocity({ scrollTop: 0 }, 1000);

или переход к элементу:

$("html, body").velocity("scroll", {
  duration: 900
});

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

Управление скоростью и длительностью

Свойство duration определяет время выполнения анимации и может быть задано несколькими способами:

$("#box").velocity({ scrollTop: 1000 }, 500);

или объектной формой:

$("#box").velocity("scroll", {
  duration: 1200
});

Допускается использование функций:

$("#box").velocity("scroll", {
  duration: function() {
    return Math.min(2000, Math.abs($(this).offset().top) / 2);
  }
});

Такой подход позволяет адаптировать скорость прокрутки к расстоянию.

Easing в прокрутке

Кривая ускорения определяет характер движения скролла. Velocity поддерживает встроенные easing-функции:

$("#section").velocity("scroll", {
  duration: 1000,
  easing: "easeInOutQuart"
});

Типичные варианты:

  • linear — равномерное движение
  • easeIn — ускорение в начале
  • easeOut — замедление в конце
  • easeInOut — комбинированная кривая

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

Прокрутка внутри контейнеров

Velocity.js поддерживает скролл внутри ограниченных блоков с overflow:

$("#scrollable").velocity({
  scrollTop: 200
}, {
  duration: 600
});

Ключевой особенностью является отсутствие необходимости обращаться к html или body. Контейнер становится автономной областью анимации.

При работе с вложенными контейнерами важно учитывать:

  • наличие фиксированной высоты
  • включённый overflow
  • возможность аппаратного ускорения

Синхронизация прокрутки с другими анимациями

Прокрутка может выполняться в составе цепочек Velocity:

$("#panel")
  .velocity({ opacity: 1 }, 300)
  .velocity("scroll", { duration: 800 })
  .velocity({ scale: 1.1 }, 200);

В таких сценариях scroll рассматривается как полноценный этап анимационной последовательности.

Очередь гарантирует последовательное выполнение без пересечений кадров анимации.

Колбэки в процессе прокрутки

Velocity предоставляет события жизненного цикла анимации:

$("#page").velocity("scroll", {
  duration: 1000,
  begin: function() {
    console.log("start");
  },
  progress: function(elements, complete) {
    console.log(complete);
  },
  complete: function() {
    console.log("done");
  }
});

Используемые этапы:

  • begin — момент старта
  • progress — обновление состояния
  • complete — завершение

progress особенно важен для синхронизации интерфейсных эффектов с движением прокрутки.

Прерывание и управление текущей прокруткой

Любая активная анимация прокрутки может быть остановлена:

$("#container").velocity("stop");

или с очисткой очереди:

$("#container").velocity("stop", true);

Поведение:

  • без параметров — остановка текущей анимации
  • с true — очистка всей очереди

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

Особенности работы с window и mobile-окружением

При прокрутке окна:

  • используется совместная анимация html, body
  • возможны различия поведения между WebKit и Gecko
  • требуется учитывать фиксированные элементы интерфейса

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

$("html, body").velocity("scroll", {
  duration: 800,
  mobileHA: false
});

Производительность и оптимизация прокрутки

Прокрутка относится к операциям, влияющим на layout и compositing. Оптимизация достигается за счёт:

  • минимизации частоты вызовов scroll-анимаций
  • использования requestAnimationFrame внутри Velocity
  • ограничения одновременных анимаций
  • избегания сложных DOM-изменений во время scroll

Рекомендуется избегать одновременного изменения scrollTop и тяжёлых CSS-свойств на одном элементе.

Связь scroll с transform и opacity

Хотя прокрутка не является CSS transform, она часто комбинируется с другими анимациями:

$("#item").velocity({
  opacity: 1,
  translateY: 0
}, 500);

$("#item").velocity("scroll", {
  duration: 800
});

Комбинация позволяет создавать эффект плавного появления контента при движении страницы.

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

Целевое значение может быть вычислено на основе состояния DOM:

$("html, body").velocity({
  scrollTop: $("#target").offset().top
}, 900);

При сложных интерфейсах учитываются дополнительные параметры:

  • высота фиксированных панелей
  • динамические отступы
  • lazy-loaded контент

Поведение очередей при множественных scroll-запросах

При последовательных вызовах:

$("html, body")
  .velocity({ scrollTop: 300 }, 400)
  .velocity({ scrollTop: 800 }, 400);

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

При отключении очереди:

$("html, body").velocity({ scrollTop: 800 }, { queue: false });

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

Scroll как часть композиции интерфейса

Прокрутка в Velocity.js рассматривается не как изолированная операция, а как компонент общей системы анимаций интерфейса, где важны:

  • согласованность движения viewport и элементов
  • предсказуемость переходов между секциями
  • синхронизация с визуальными эффектами
  • контроль состояния через callbacks и очереди

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

Оглавление