removed overflow-y-scroll

canopas · Nov 4, 2023 · 158a4d9 · 158a4d9
1 parent 77274a0
commit 158a4d9
Showing 1 changed file with 40 additions and 20 deletions.
diff --git a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
@@ -61,19 +61,20 @@
     <!-- Flutter Desktop Swiper UI -->
     <div
       id="stickyParent"
-      class="hidden sticky-parent lg:block relative h-[100vh]"
+      class="hidden sticky-parent lg:block relative h-[200vh]"
     >
       <div
         id="sticky"
-        class="!sticky main top-[6.5rem] h-[84vh] overflow-hidden"
+        class="!sticky main top-[6.5rem] h-[100vh] 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"
+          class="mb-[4.5rem] container item"
+          :class="[{ active: index === activeIndex }]"
           :id="'item-' + index"
           :ref="index"
         >
@@ -122,16 +123,14 @@ 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],
       activeIndex: 0,
-      lastScrollY: 0,
-      prevIndex: 0,
-      height: 0,
+      activeSlide: 0,
+      slideHeight: 0,
       items: [
         {
           title: `Flutter App Development <br/>Consultation`,
@@ -177,22 +176,21 @@ export default {
     };
   },
   methods: {
-    onSlideChange(event) {
-      this.activeIndex = event.activeIndex;
-    },
     handleScroll() {
-      const scrollY = window.scrollY;
-      const scrollUp = this.lastScrollY > scrollY && window.pageYOffset > 100;
       const stickyParent = document.getElementById("stickyParent");
       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");
+      const child = document.querySelectorAll(".item");
+      const stickyHeight = sticky.scrollHeight;
+      const verticalScrollHeight =
+        stickyParent.getBoundingClientRect().height -
+        sticky.getBoundingClientRect().height;
+      const stickyT = stickyParent.getBoundingClientRect();
+      if (stickyT.top > 0) {
+        sticky.scrollTop = 0;
       } else {
-        sticky.classList.remove("overflow-y-scroll");
+        sticky.scrollTop =
+          (stickyHeight / verticalScrollHeight) * -stickyT.top * 0.9;
+        console.log(sticky.scrollTop);
       }
     },
   },
@@ -201,9 +199,9 @@ export default {
     SwiperSlide,
   },
   mounted() {
-    this.height = window.innerHeight;
     window.addEventListener("scroll", this.handleScroll);
   },
+
   unmounted() {
     window.removeEventListener("scroll", this.handleScroll);
   },
@@ -229,3 +227,25 @@ export default {
   --swiper-pagination-color: var(--theme-secondary-secondary, #f2709c);
 }
 </style>
+
+<!-- export default {
+  methods: {
+    handleWheel(event) {
+      const delta = event.deltaY;
+
+      if (delta > 0 && this.activeSlide < this.items.length - 2) {
+        this.activeSlide += 2;
+      } else if (delta < 0 && this.activeSlide >= 2) {
+        this.activeSlide -= 2;
+      }
+
+      event.preventDefault();
+      this.scrollToActiveSlide();
+    },
+    scrollToActiveSlide() {
+      const position = this.activeSlide * this.slideHeight;
+      this.$refs.stickyParent.scrollTop = position;
+    },
+  },
+};
+</script>  -->