Saturday, February 10, 2024
HomeiOS DevelopmentJavaScript contact occasion listeners on iOS don't register fast swipes

JavaScript contact occasion listeners on iOS don’t register fast swipes


Im implementing easy swipe occasions with touchstartandtouchend its working tremendous on Androis however on IOS 13, 14, 15 it`s registering swipes provided that you make them sluggish. Right here is my js code perhaps you may spot my difficulty or now sollution.

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

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

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

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

    // Calculate the goal slide based mostly on scroll path
    const targetIndex = calculateTargetIndex(currentIndex);

    // Replace carousel rotation and lively slides
    rotateCarousel(targetIndex);
    activeSlideChanger(targetIndex);

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

}

// Get present lively component index
perform getCurrentIndex() {
  return Array.from(controlLinks).findIndex((management) =>
    management.classList.incorporates("lively")
  );
}


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

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

// Change lively slide
perform activeSlideChanger(targetIndex) {
  doc.querySelector(".slide.lively").classList.take away("lively");
  const activeSlide = doc.querySelector(
    `.slide:nth-child(${controlLinks[targetIndex].dataset.index})`
  );
  activeSlide.classList.add("lively");
  doc.querySelector("a.lively").classList.take away("lively");
  controlLinks[targetIndex].classList.add("lively");
}

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

//Add management on contact begin (cell)
doc.addEventListener("touchstart", perform (occasion) {
  threshold = 0;
  touchStartY = occasion.touches[0].clientY;
  accumulatedDeltaY = 0;
}, false);

// Add management on contact finish (cell)
doc.addEventListener("touchend", perform (occasion) {
  const touchEndY = occasion.changedTouches[0].clientY;
  const deltaY = touchEndY - touchStartY;
  updateCarousel(-deltaY, threshold);
}, false);

Tried including stuff like: html { touch-action: manipulation; } and another options, however nothing appears to work for me.



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments