Пример JavaScript-кода, который отслеживает горизонтальное движение пальца по экрану

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

В этой статье приведён простой пример кода на JavaScript, который определяет направление и расстояние горизонтального свайпа.

---

Основная идея

События, связанные с касаниями, в браузере называются:

• touchstart — палец коснулся экрана;
• touchmove — палец движется по экрану;
• touchend — палец оторван от поверхности.

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

---

Пример кода

// Элемент, на котором отслеживаем свайп
const slider = document.querySelector('.slider');

let startX = 0;  // начальная координата
let currentX = 0; // текущая позиция
let distance = 0; // пройденное расстояние

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX; // запоминаем начало касания
});

slider.addEventListener('touchmove', (e) => {
  currentX = e.touches[0].clientX;
  distance = currentX - startX;
});

slider.addEventListener('touchend', () => {
  if (Math.abs(distance) > 50) { // минимальная длина свайпа
    if (distance > 0) {
      console.log(`Свайп вправо, ${distance}px`);
    } else {
      console.log(`Свайп влево, ${Math.abs(distance)}px`);
    }
  } else {
    console.log('Свайп слишком короткий');
  }

  // сброс значений
  startX = 0;
  currentX = 0;
  distance = 0;
});

---

Как это работает

1. При первом касании запоминаем координату startX.
2. Во время движения пальца отслеживаем текущее положение currentX.
3. После отпускания пальца (touchend) вычисляем разницу между началом и концом движения.
4. Если значение больше порогового (например, 50 пикселей) — считаем, что это полноценный свайп.
5. По знаку разницы определяем направление — влево или вправо.

---

Где это применить

• Слайдер изображений — перелистывание карточек или фото.
• Интерактивные интерфейсы — смена вкладок, шагов формы.
• Мобильные веб-приложения — навигация без кнопок.

---

Итог

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