Handle scroll in touch devices

canopas · Oct 11, 2023 · db49671 · db49671
1 parent 9baf73b
commit db49671
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -183,7 +183,6 @@ import desktop_luxeradio1 from "@/assets/images/ios-app-development/casestudy/lu
 import desktop_luxeradio2 from "@/assets/images/ios-app-development/casestudy/luxe2-800w.webp";
 import desktop_togness1 from "@/assets/images/ios-app-development/casestudy/togness1-800w.webp";
 import desktop_togness2 from "@/assets/images/ios-app-development/casestudy/togness2-800w.webp";
-import { elementInViewPort } from "@/utils";
 export default {
   data() {
     return {
@@ -192,6 +191,7 @@ export default {
       swiperRef: 0,
       activeIndex: 0,
       skipNext: true,
+      lastTouchY: null,
       portfolios: [
         {
           title: "Justly",
@@ -247,14 +247,21 @@ export default {
   },
   mounted() {
     document.body.addEventListener("wheel", this.handleWheel);
+    window.addEventListener("touchstart", this.handleTouchStart);
+    window.addEventListener("touchmove", this.handleTouchMove);
+    window.addEventListener("touchend", this.handleTouchEnd);
   },
   unmounted() {
     document.body.removeEventListener("wheel", this.handleWheel);
+    window.removeEventListener("touchstart", this.handleTouchStart);
+    window.removeEventListener("touchmove", this.handleTouchMove);
+    window.removeEventListener("touchend", this.handleTouchEnd);
   },
   methods: {
     setSwiperRef(swiper) {
       this.swiperRef = swiper;
     },
+    // handle mouseScroll event
     scrollDirectionIsUp(event) {
       if (event.wheelDelta) {
         return event.wheelDelta > 0;
@@ -269,6 +276,24 @@ export default {
         this.skipNext = true;
       }
     },
+    //handleTouch event
+    handleTouchStart(event) {
+      this.lastTouchY = event.touches[0].clientY;
+    },
+    handleTouchMove(event) {
+      if (this.lastTouchY !== null) {
+        const currentTouchY = event.touches[0].clientY;
+        if (currentTouchY > this.lastTouchY) {
+          this.skipNext = false;
+        } else if (currentTouchY < this.lastTouchY) {
+          this.skipNext = true;
+        }
+        this.lastTouchY = currentTouchY;
+      }
+    },
+    handleTouchEnd() {
+      this.lastTouchY = null;
+    },
 
     scrollToNext() {
       if (this.skipNext) {