Валидация селекторов

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

Проверка существования элемента

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

const target = document.querySelector('#section1');

if (target) {
  const scroll = new SmoothScroll();
  scroll.animateScroll(target);
} else {
  console.warn('Элемент с селектором #section1 не найден');
}

Ключевые моменты:

  • querySelector возвращает null, если элемент не найден.
  • Проверка через if (target) предотвращает ошибки при попытке скролла к несуществующему элементу.

Поддержка CSS-селекторов

Smooth Scroll работает с любыми валидными CSS-селекторами: ID, классы, атрибуты. Например:

// По классу
scroll.animateScroll(document.querySelector('.content-block'));

// По атрибуту
scroll.animateScroll(document.querySelector('[data-scroll="target"]'));

Особенности:

  • Если селектор совпадает с несколькими элементами, прокрутка будет выполняться только к первому элементу.
  • Использование сложных селекторов, таких как div > p:first-child, также поддерживается.

Валидация перед привязкой обработчиков

Часто Smooth Scroll используется вместе с ссылками <a>:

const links = document.querySelectorAll('a[data-scroll]');

links.forEach(link => {
  const targetSelector = link.getAttribute('href');
  const targetElement = document.querySelector(targetSelector);

  if (targetElement) {
    link.addEventListener('click', e => {
      e.preventDefault();
      scroll.animateScroll(targetElement);
    });
  } else {
    console.warn(`Элемент ${targetSelector} отсутствует на странице`);
  }
});

Важные моменты:

  • getAttribute('href') может вернуть некорректное значение, например #, #undefined, поэтому валидация обязательна.
  • Без проверки попытка прокрутки к несуществующему элементу вызовет ошибку и остановит выполнение скрипта.

Встроенные проверки Smooth Scroll

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

  • Если селектор пустой или элемент отсутствует, вызов animateScroll не приводит к ошибке, но прокрутка не выполняется.
  • Можно использовать колбэк before для дополнительной валидации:
const scroll = new SmoothScroll();

scroll.animateScroll(document.querySelector('#section2'), {
  before: function (anchor, toggle) {
    if (!anchor) {
      console.error('Элемент для прокрутки не найден');
      return false; // отменяет анимацию
    }
  }
});

Обработка динамически создаваемых элементов

При динамическом изменении DOM селекторы могут перестать существовать к моменту клика. Для таких случаев необходимо:

  1. Перепроверять селектор перед вызовом animateScroll.
  2. Использовать делегирование событий, если элементы создаются после загрузки страницы.
document.body.addEventListener('click', function(e) {
  const link = e.target.closest('a[data-scroll]');
  if (!link) return;

  const target = document.querySelector(link.getAttribute('href'));
  if (target) {
    e.preventDefault();
    scroll.animateScroll(target);
  }
});

Валидация множественных селекторов

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

const sections = document.querySelectorAll('.section');

sections.forEach(section => {
  if (section) {
    scroll.animateScroll(section);
  }
});

Советы:

  • Проверка на null для каждого элемента предотвращает ошибки при частичной динамической загрузке контента.
  • Можно объединять селекторы через запятую, например #header, #footer, но нужно убедиться, что все элементы существуют, иначе анимация будет выполняться только для найденных.

Использование регулярных выражений для проверки селектора

Иногда требуется убедиться, что значение атрибута корректно передано как селектор:

const href = link.getAttribute('href');
if (/^#[\w-]+$/.test(href)) {
  const target = document.querySelector(href);
  if (target) scroll.animateScroll(target);
}

Преимущества:

  • Предотвращает использование некорректных ссылок вроде #123!@.
  • Обеспечивает согласованность работы Smooth Scroll с различными браузерами.

Практическая рекомендация

  • Всегда проверять существование целевого элемента перед вызовом animateScroll.
  • Использовать валидные CSS-селекторы и избегать динамически формируемых некорректных строк.
  • Логировать отсутствующие элементы, чтобы понимать, какие ссылки или блоки требуют исправления.

Валидация селекторов — это базовый, но критически важный шаг для корректной работы Smooth Scroll, предотвращения ошибок JavaScript и поддержания плавной анимации при прокрутке.

Оглавление