Add scroll in swiper when reach fully on viewport top

canopas · Oct 11, 2023 · 93b8c41 · 93b8c41
1 parent db49671
commit 93b8c41
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -72,15 +72,18 @@
     <!-- Mobile UI END-->
     <!-- Desktop UI -->
 
-    <div class="tw-h-[700vh] xll:!tw-h-[400vh] tw-hidden md:tw-block">
-      <div class="tw-sticky tw-top-0 tw-max-h-screen tw-overflow-hidden">
+    <div
+      id="stickyParent"
+      class="tw-h-[700vh] xll:!tw-h-[400vh] tw-hidden md:tw-block"
+    >
+      <div class="tw-sticky tw-top-0 tw-max-h-screen tw-overflow-hidden box">
         <swiper
           :direction="'vertical'"
           :slidesPerView="1"
           :centeredSlides="true"
           :spaceBetween="0"
           :speed="700"
-          :mousewheel="true"
+          :mousewheel="false"
           :modules="modules"
           class="swiper-container tw-h-screen"
           @swiper="setSwiperRef"
@@ -192,6 +195,7 @@ export default {
       activeIndex: 0,
       skipNext: true,
       lastTouchY: null,
+      lastScrollY: 0,
       portfolios: [
         {
           title: "Justly",
@@ -250,12 +254,14 @@ export default {
     window.addEventListener("touchstart", this.handleTouchStart);
     window.addEventListener("touchmove", this.handleTouchMove);
     window.addEventListener("touchend", this.handleTouchEnd);
+    window.addEventListener("scroll", this.handleScrollTop);
   },
   unmounted() {
     document.body.removeEventListener("wheel", this.handleWheel);
     window.removeEventListener("touchstart", this.handleTouchStart);
     window.removeEventListener("touchmove", this.handleTouchMove);
     window.removeEventListener("touchend", this.handleTouchEnd);
+    window.removeEventListener("scroll", this.handleScrollTop);
   },
   methods: {
     setSwiperRef(swiper) {
@@ -302,6 +308,18 @@ export default {
         this.$emit("scroll-to-previous");
       }
     },
+    handleScrollTop() {
+      const stickyParent = document.getElementById("stickyParent");
+      const stickyTop = stickyParent.offsetTop;
+      let scrollTop = window.scrollY;
+      if (window.pageYOffset >= stickyTop) {
+        this.swiperRef.mousewheel.enable();
+        console.log("enablemousewheel", this.swiperRef.mousewheel.enable());
+      } else {
+        console.log("disablemousewheel", this.swiperRef.mousewheel.disable());
+      }
+      this.lastScrollY = scrollTop;
+    },
   },
   components: {
     Swiper,