remove swiper and added overflow

canopas · Nov 3, 2023 · 77274a0 · 77274a0
1 parent db6db0b
commit 77274a0
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 84 deletions.
diff --git a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
@@ -59,75 +59,56 @@
       </swiper>
     </div>
     <!-- Flutter Desktop Swiper UI -->
-    <div id="stickyParent" class="hidden sticky-parent lg:block relative h-[150vh]">
-      <div class="!sticky top-[6.5rem] container main overflow-hidden">
-        <hr class="absolute h-screen left-[50%] border-[0.1px] opacity-[0.5]" />
-        <swiper
-          :slidesPerView="2"
-          :spaceBetween="72"
-          :direction="'vertical'"
-          :speed="600"
-          :mousewheel="{
-            enabled: false,
-            releaseOnEdges: true,
-            sensitivity: 1,
-            thresholdDelta: 1,
-          }"
-          :touchReleaseOnEdges="true"
-          :modules="modules"
-          :allowTouchMove="false"
-          class="!h-full"
-          @swiper="setSwiperRef"
-          @slideChange="onSlideChange"
+    <div
+      id="stickyParent"
+      class="hidden sticky-parent lg:block relative h-[100vh]"
+    >
+      <div
+        id="sticky"
+        class="!sticky main top-[6.5rem] h-[84vh] overflow-hidden"
+      >
+        <hr
+          class="absolute h-[235vh] left-[50%] border-[0.1px] opacity-[0.5]"
+        />
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          class="mb-[4.5rem] container"
+          :id="'item-' + index"
+          :ref="index"
         >
-          <swiper-slide
-            v-for="(item, index) in items"
-            :key="index"
+          <div
             :class="[
+              ' flex gap-[4rem]',
               {
-                ' opacity-50': activeIndex !== index,
-                ' opacity-100':
-                  activeIndex === index ||
-                  (activeIndex === item.length && index === 0),
+                ' flex-row text-right ': index % 2 === 0,
+                ' flex-row-reverse text-left': index % 2 !== 0,
               },
             ]"
           >
-            <div
-              :class="[
-                ' flex  gap-[4rem]',
-                {
-                  ' flex-row text-right ': index % 2 === 0,
-                  ' flex-row-reverse text-left': index % 2 !== 0,
-                },
-              ]"
-            >
-              <div class="flex flex-col flex-1 gap-[1.5rem]">
-                <div class="header-3">
-                  <span v-html="item.desktoptitle"></span>
-                </div>
-                <div class="sub-h3-regular">
-                  <p
-                    v-for="(list, listIndex) in item.description"
-                    :key="listIndex"
-                  >
-                    {{ list }}
-                  </p>
-                </div>
+            <div class="flex flex-col flex-1 gap-[1.5rem]">
+              <div class="header-3">
+                <span v-html="item.desktoptitle"></span>
               </div>
-              <div class="flex-1" :class="{ 'relative': index % 2 !== 0 }">
-                <img
-                  :src="item.image"
-                  alt="development-service-image"
-                  class=""
-                  :class="{
-                    'absolute right-0': index % 2 !== 0,
-                  }"
-                  loading="lazy"
-                />
+              <div class="sub-h3-regular">
+                <p
+                  v-for="(list, listIndex) in item.description"
+                  :key="listIndex"
+                >
+                  {{ list }}
+                </p>
               </div>
             </div>
-          </swiper-slide>
-        </swiper>
+            <div class="flex-1" :class="{ relative: index % 2 !== 0 }">
+              <img
+                :src="item.image"
+                alt="development-service-image"
+                :class="{ 'absolute right-0': index % 2 !== 0 }"
+                loading="lazy"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -141,13 +122,16 @@ import design from "@/assets/images/flutter-app-development/development/design.w
 import development from "@/assets/images/flutter-app-development/development/development.webp";
 import deployment from "@/assets/images/flutter-app-development/development/deployment.webp";
 import maintainance from "@/assets/images/flutter-app-development/development/maintainance.webp";
+import { elementInViewPort } from "@/utils";
+
 export default {
   data() {
     return {
       modules: [Autoplay, Mousewheel, Pagination],
-      swiper: null,
-      swiperRef: 0,
       activeIndex: 0,
+      lastScrollY: 0,
+      prevIndex: 0,
+      height: 0,
       items: [
         {
           title: `Flutter App Development <br/>Consultation`,
@@ -192,46 +176,47 @@ export default {
       ],
     };
   },
-  mounted() {
-    document.addEventListener("scroll", this.handleScroll);
-  },
-  unmounted() {
-    document.removeEventListener("scroll", this.handleScroll);
-  },
   methods: {
     onSlideChange(event) {
       this.activeIndex = event.activeIndex;
     },
-    setSwiperRef(swiper) {
-      this.swiperRef = swiper;
-    },   
-    handleScrollTop() {
+    handleScroll() {
+      const scrollY = window.scrollY;
+      const scrollUp = this.lastScrollY > scrollY && window.pageYOffset > 100;
       const stickyParent = document.getElementById("stickyParent");
-      const stickyTop = stickyParent.offsetTop;
-      let scrollTop = window.scrollY;
-      var position = stickyParent.getBoundingClientRect();
-      if (
-        window.pageYOffset >= stickyTop &&
-        position.bottom >=
-          (window.innerHeight || document.documentElement.clientHeight)
-      ) {
-        this.swiperRef.mousewheel.enable();
+      const sticky = document.getElementById("sticky");
+
+      const stickyTop = sticky.getBoundingClientRect();
+      const stickyT = stickyParent.getBoundingClientRect().top;
+
+      if (stickyTop.top - stickyT > 0) {
+        sticky.classList.add("overflow-y-scroll");
       } else {
-        this.swiperRef.mousewheel.disable();
+        sticky.classList.remove("overflow-y-scroll");
       }
-      this.lastScrollY = scrollTop;
     },
   },
   components: {
     Swiper,
     SwiperSlide,
   },
+  mounted() {
+    this.height = window.innerHeight;
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  unmounted() {
+    window.removeEventListener("scroll", this.handleScroll);
+  },
 };
 </script>
 <style lang="postcss">
 @import "swiper/css";
 @import "swiper/css/pagination";
 
+.main::-webkit-scrollbar {
+  display: none;
+}
+
 .swiper-pagination {
   position: static;
   padding: 1.94rem 0 3.3rem 0;

diff --git a/nuxt-frontend/pages/flutter-app-development.vue b/nuxt-frontend/pages/flutter-app-development.vue
@@ -14,7 +14,7 @@ import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/flutter-app-development/LandingSection.vue";
 import DevelopmentSection from "@/components/flutter-app-development/DevelopmentSection.vue";
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 export default {
   data() {