scroll mobile

src/assets/js/portfolio.js

@@ -613,6 +613,11 @@ function updateScrollScene() {
 
 let currentSlideIndex = 0;
 let isAnimating = false;
+let lastScrollTime = 0;
+const scrollCooldown = 800; 
+
+let touchStartY = 0;
+let touchStartX = 0;
 
 function goToSlide(index) {
   if (index < 0 || index >= totalSlides) return;
@@ -664,20 +669,15 @@ function goToSlide(index) {
   }, 600);
 }
 
-let lastScrollTime = 0;
-const scrollCooldown = 800; 
-
 showcase.addEventListener('wheel', function(e) {
   const currentTime = new Date().getTime();
   const isAtEnd = currentSlideIndex === totalSlides - 1;
   const isAtStart = currentSlideIndex === 0;
 
-  
   if ((e.deltaY > 0 && !isAtEnd) || (e.deltaY < 0 && !isAtStart)) {
     e.preventDefault();
   }
 
-  
   if (isAnimating || (currentTime - lastScrollTime < scrollCooldown)) {
     return;
   }
@@ -697,19 +697,34 @@ showcase.addEventListener('wheel', function(e) {
   }
 }, { passive: false });
 
+showcase.addEventListener('touchstart', function(e) {
+  touchStartY = e.touches[0].clientY;
+  touchStartX = e.touches[0].clientX;
+}, { passive: true });
+
 showcase.addEventListener('touchmove', function(e) {
-  const currentTime = new Date().getTime();
+  if (!touchStartY) return;
+
+  const currentTouchY = e.touches[0].clientY;
+  const currentTouchX = e.touches[0].clientX;
+  
+  const diffY = touchStartY - currentTouchY;
+  const diffX = touchStartX - currentTouchX;
+
+  if (Math.abs(diffX) > Math.abs(diffY)) {
+    return;
+  }
+
   const isAtEnd = currentSlideIndex === totalSlides - 1;
   const isAtStart = currentSlideIndex === 0;
 
-  const currentTouchY = e.touches[0].clientY;
-  const diffY = touchStartY - currentTouchY;
-
-  
   if ((diffY > 0 && !isAtEnd) || (diffY < 0 && !isAtStart)) {
-    e.preventDefault();
+    if (e.cancelable) e.preventDefault();
+  } else {
+    return; 
   }
 
+  const currentTime = new Date().getTime();
   if (isAnimating || (currentTime - lastScrollTime < scrollCooldown)) {
     return;
   }
@@ -726,9 +741,14 @@ showcase.addEventListener('touchmove', function(e) {
         goToSlide(currentSlideIndex - 1);
       }
     }
+    touchStartY = currentTouchY; 
   }
 }, { passive: false });
 
+showcase.addEventListener('touchend', function() {
+  touchStartY = 0;
+}, { passive: true });
+
 goToSlide(0);