Условная прокрутка

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

Инициализация Smooth Scroll

Для начала необходимо подключить библиотеку:

<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.polyfills.min.js"></script>

Создание экземпляра Smooth Scroll выполняется через конструктор:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 800,
  speedAsDuration: true,
  easing: 'easeInOutCubic'
});

Пояснение ключевых параметров:

  • speed – скорость анимации в миллисекундах.
  • speedAsDuration – если true, скорость рассматривается как фиксированная длительность, независимо от расстояния.
  • easing – функция плавности анимации. Поддерживаются значения типа 'linear', 'easeInOutCubic' и другие.

Прокрутка по условию

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

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(event) {
    const target = document.querySelector(this.getAttribute('href'));

    if (!target) return;

    const viewportHeight = window.innerHeight;
    const targetTop = target.getBoundingClientRect().top;

    // Условие: элемент должен быть в верхней половине окна
    if (targetTop < viewportHeight / 2) {
      scroll.animateScroll(target);
    }

    event.preventDefault();
  });
});

Разбор кода:

  • getBoundingClientRect().top возвращает координату верхней границы элемента относительно видимой области.
  • Сравнение с viewportHeight / 2 создаёт условие запуска прокрутки только для элементов, находящихся в верхней половине экрана.
  • Метод animateScroll(target) инициирует плавное перемещение к элементу.

Настройка смещения и ограничения

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

scroll.animateScroll(target, null, {
  offset: 100, // смещение от верхнего края
  clip: true   // запрещает прокрутку выше начала документа
});

Пояснения:

  • offset добавляет фиксированное смещение. Можно использовать отрицательные значения для смещения выше.
  • clip предотвращает выход прокрутки за пределы документа, что особенно полезно для коротких страниц.

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

В случаях, когда контент страницы динамически изменяется (например, загружаются изображения или AJAX-контент), координаты элементов могут изменяться. Для корректной работы условной прокрутки необходимо учитывать актуальные позиции:

function scrollToTarget(selector) {
  const target = document.querySelector(selector);
  if (!target) return;

  // Вычисляем актуальное положение
  const rect = target.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const targetPosition = rect.top + scrollTop;

  scroll.animateScroll(targetPosition);
}

Использование абсолютной позиции targetPosition позволяет избежать смещения при динамических изменениях контента.

Условная прокрутка с учетом медиа-запросов

Для разных устройств можно задавать отдельные условия:

if (window.innerWidth > 768) {
  scroll.animateScroll(target, null, { speed: 1000 });
} else {
  scroll.animateScroll(target, null, { speed: 500 });
}

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

Комбинация с событиями страницы

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

document.querySelector('#openModal').addEventListener('click', () => {
  const modalContent = document.querySelector('#modalContent');
  
  modalContent.style.display = 'block';
  
  // Запускаем прокрутку только после отображения блока
  scroll.animateScroll(modalContent);
});

Это гарантирует, что элемент будет видим в момент прокрутки, предотвращая неожиданные эффекты.

Обработка коллизий и приоритетов

Для сложных интерфейсов полезно вводить условия приоритетов:

const elements = document.querySelectorAll('.scroll-item');

elements.forEach(el => {
  if (!el.classList.contains('disabled') && el.offsetTop > window.scrollY) {
    scroll.animateScroll(el);
    return false; // останавливаем дальнейшие проверки
  }
});

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

Поддержка колбэков

Smooth Scroll предоставляет возможность использовать колбэки до и после анимации:

scroll.animateScroll(target, null, {
  before: () => console.log('Прокрутка началась'),
  after: () => console.log('Прокрутка завершена')
});

Колбэки позволяют интегрировать дополнительные действия, например, анимацию или изменение классов элементов после завершения перемещения.

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

Оглавление