pic position + scroll fix

src/assets/css/portfolio-responsive.css

@@ -66,10 +66,6 @@
     width: 100%;
   }
 
-  .media {
-    width: auto;
-  }
-
   .result-section-box[data-card-count='4'] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

src/assets/css/portfolio.css

@@ -1791,7 +1791,7 @@ textarea {
   overflow: hidden;
 }
 .media {
-  height: 100%;
+  height: 669px;
   width: 100%;
   object-fit: cover;
   object-position: center;

src/assets/js/portfolio.js

@@ -669,68 +669,57 @@ function goToSlide(index) {
   }, 600);
 }
 
-showcase.addEventListener('wheel', function(e) {
+let isSectionPinned = false;
-  const currentTime = new Date().getTime();
-  const isAtEnd = currentSlideIndex === totalSlides - 1;
-  const isAtStart = currentSlideIndex === 0;
 
-  if ((e.deltaY > 0 && !isAtEnd) || (e.deltaY < 0 && !isAtStart)) {
+const observer = new IntersectionObserver(
-    e.preventDefault();
+  (entries) => {
+    entries.forEach((entry) => {
+      isSectionPinned = entry.isIntersecting;
+    });
+  },
+  {
+    threshold: 0.1, 
   }
+);
 
-  if (isAnimating || (currentTime - lastScrollTime < scrollCooldown)) {
+observer.observe(showcase);
-    return;
-  }
 
-  if (Math.abs(e.deltaY) < 10) return; 
+showcase.addEventListener(
+  'wheel',
+  function (e) {
+    const currentTime = new Date().getTime();
+    const isAtEnd = currentSlideIndex === totalSlides - 1;
+    const isAtStart = currentSlideIndex === 0;
 
-  if (e.deltaY > 0) {
+    const rect = showcase.getBoundingClientRect();
-    if (!isAtEnd) {
+
-      lastScrollTime = currentTime;
+    if (e.deltaY > 0 && rect.top > 5) {
-      goToSlide(currentSlideIndex + 1);
+      return; 
     }
-  } else {
+
-    if (!isAtStart) {
+    if (e.deltaY < 0 && rect.bottom < window.innerHeight - 5) {
-      lastScrollTime = currentTime;
+      return;
-      goToSlide(currentSlideIndex - 1);
     }
-  }
-}, { passive: false });
 
-showcase.addEventListener('touchstart', function(e) {
+    if (isAtStart && e.deltaY < 0 && rect.top >= -5) {
-  touchStartY = e.touches[0].clientY;
+      return;
-  touchStartX = e.touches[0].clientX;
+    }
-}, { passive: true });
   
-showcase.addEventListener('touchmove', function(e) {
+    if (isAtEnd && e.deltaY > 0 && rect.bottom <= window.innerHeight + 5) {
-  if (!touchStartY) return;
+      return;
+    }
 
-  const currentTouchY = e.touches[0].clientY;
+    if ((e.deltaY > 0 && !isAtEnd) || (e.deltaY < 0 && !isAtStart)) {
-  const currentTouchX = e.touches[0].clientX;
+      e.preventDefault();
+    }
 
-  const diffY = touchStartY - currentTouchY;
+    if (isAnimating || currentTime - lastScrollTime < scrollCooldown) {
-  const diffX = touchStartX - currentTouchX;
+      return;
+    }
 
-  if (Math.abs(diffX) > Math.abs(diffY)) {
+    if (Math.abs(e.deltaY) < 10) return;
-    return;
-  }
 
-  const isAtEnd = currentSlideIndex === totalSlides - 1;
+    if (e.deltaY > 0) {
-  const isAtStart = currentSlideIndex === 0;
-
-  if ((diffY > 0 && !isAtEnd) || (diffY < 0 && !isAtStart)) {
-    if (e.cancelable) e.preventDefault();
-  } else {
-    return; 
-  }
-
-  const currentTime = new Date().getTime();
-  if (isAnimating || (currentTime - lastScrollTime < scrollCooldown)) {
-    return;
-  }
-
-  if (Math.abs(diffY) > 50) {
-    if (diffY > 0) {
       if (!isAtEnd) {
         lastScrollTime = currentTime;
         goToSlide(currentSlideIndex + 1);
@@ -741,9 +730,77 @@ showcase.addEventListener('touchmove', function(e) {
         goToSlide(currentSlideIndex - 1);
       }
     }
-    touchStartY = currentTouchY; 
+  },
-  }
+  { passive: false }
-}, { passive: false });
+);
+showcase.addEventListener('touchstart', function(e) {
+  touchStartY = e.touches[0].clientY;
+  touchStartX = e.touches[0].clientX;
+}, { passive: true });
+
+showcase.addEventListener(
+  'touchmove',
+  function (e) {
+    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 rect = showcase.getBoundingClientRect();
+
+    if (diffY > 0 && rect.top > 5) {
+      return;
+    }
+
+    if (diffY < 0 && rect.bottom < window.innerHeight - 5) {
+      return;
+    }
+
+    const isAtEnd = currentSlideIndex === totalSlides - 1;
+    const isAtStart = currentSlideIndex === 0;
+
+    if (isAtStart && diffY < 0 && rect.top >= -5) {
+      return;
+    }
+    if (isAtEnd && diffY > 0 && rect.bottom <= window.innerHeight + 5) {
+      return;
+    }
+
+    if ((diffY > 0 && !isAtEnd) || (diffY < 0 && !isAtStart)) {
+      if (e.cancelable) e.preventDefault();
+    } else {
+      return;
+    }
+
+    const currentTime = new Date().getTime();
+    if (isAnimating || currentTime - lastScrollTime < scrollCooldown) {
+      return;
+    }
+
+    if (Math.abs(diffY) > 50) {
+      if (diffY > 0) {
+        if (!isAtEnd) {
+          lastScrollTime = currentTime;
+          goToSlide(currentSlideIndex + 1);
+        }
+      } else {
+        if (!isAtStart) {
+          lastScrollTime = currentTime;
+          goToSlide(currentSlideIndex - 1);
+        }
+      }
+      touchStartY = currentTouchY;
+    }
+  },
+  { passive: false }
+);
 
 showcase.addEventListener('touchend', function() {
   touchStartY = 0;