JavaScript touch event listeners on iOS do not register quick swipes


Im implementing simple swipe events with touchstartandtouchend its working fine on Androis but on IOS 13, 14, 15 it`s registering swipes only if you make them slow. Here is my js code maybe you can spot my issue or now sollution.

const carousel_wrapper = document.querySelector(".carousel");
const carousel = document.querySelector(".wheel-container");
const slides = document.querySelectorAll(".slide");
const controlLinks = document.querySelectorAll(".controls-container a");

let touchStartY = 0;
let accumulatedDeltaY = 0;
let threshold = 0;

function updateCarousel(deltaY, threshold) {
  accumulatedDeltaY += deltaY;

  // Check if the accumulated delta exceeds the threshold
Math.abs(accumulatedDeltaY) >= threshold
? (() => {
    const currentIndex = getCurrentIndex();

    // Calculate the target slide based on scroll direction
    const targetIndex = calculateTargetIndex(currentIndex);

    // Update carousel rotation and active slides
    rotateCarousel(targetIndex);
    activeSlideChanger(targetIndex);

    // Reset the accumulated delta
    accumulatedDeltaY = 0;
  })()
: null;

}

// Get current active element index
function getCurrentIndex() {
  return Array.from(controlLinks).findIndex((control) =>
    control.classList.contains("active")
  );
}


function calculateTargetIndex(currentIndex) {
  const scrollDirection = Math.sign(accumulatedDeltaY);
  return scrollDirection > 0
    ? Math.min(currentIndex + 1, controlLinks.length - 1)
    : Math.max(currentIndex - 1, 0);
}

// Rotate carousele 
function rotateCarousel(targetIndex) {
  const rotationAngle = targetIndex * 90;
  carousel.style.transform = `rotate(${rotationAngle}deg)`;
  slides.forEach((slide, slideIndex) => {
    const slideRotation = -rotationAngle;
    slide.style.transform = `rotate(${slideRotation}deg)`;
  });
}

// Change active slide
function activeSlideChanger(targetIndex) {
  document.querySelector(".slide.active").classList.remove("active");
  const activeSlide = document.querySelector(
    `.slide:nth-child(${controlLinks[targetIndex].dataset.index})`
  );
  activeSlide.classList.add("active");
  document.querySelector("a.active").classList.remove("active");
  controlLinks[targetIndex].classList.add("active");
}

// Add control on wheel scroll (desktop)
carousel_wrapper.addEventListener("wheel", (event) => {
  const deltaY = event.deltaY;
  threshold = 200;
  updateCarousel(deltaY, threshold);
});

//Add control on touch start (mobile)
document.addEventListener("touchstart", function (event) {
  threshold = 0;
  touchStartY = event.touches[0].clientY;
  accumulatedDeltaY = 0;
}, false);

// Add control on touch end (mobile)
document.addEventListener("touchend", function (event) {
  const touchEndY = event.changedTouches[0].clientY;
  const deltaY = touchEndY - touchStartY;
  updateCarousel(-deltaY, threshold);
}, false);

Tried adding stuff like: html { touch-action: manipulation; } and some other solutions, but nothing seems to work for me.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img