Im implementing simple swipe events with
touchstartand
touchend it
s 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.