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,16 +669,51 @@ function goToSlide(index) {
   }, 600);
 }
 
-showcase.addEventListener('wheel', function(e) {
+let isSectionPinned = false;
+
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      isSectionPinned = entry.isIntersecting;
+    });
+  },
+  {
+    threshold: 0.1, 
+  }
+);
+
+observer.observe(showcase);
+
+showcase.addEventListener(
+  'wheel',
+  function (e) {
     const currentTime = new Date().getTime();
     const isAtEnd = currentSlideIndex === totalSlides - 1;
     const isAtStart = currentSlideIndex === 0;
 
+    const rect = showcase.getBoundingClientRect();
+
+    if (e.deltaY > 0 && rect.top > 5) {
+      return; 
+    }
+
+    if (e.deltaY < 0 && rect.bottom < window.innerHeight - 5) {
+      return;
+    }
+
+    if (isAtStart && e.deltaY < 0 && rect.top >= -5) {
+      return;
+    }
+  
+    if (isAtEnd && e.deltaY > 0 && rect.bottom <= window.innerHeight + 5) {
+      return;
+    }
+
     if ((e.deltaY > 0 && !isAtEnd) || (e.deltaY < 0 && !isAtStart)) {
       e.preventDefault();
     }
 
-  if (isAnimating || (currentTime - lastScrollTime < scrollCooldown)) {
+    if (isAnimating || currentTime - lastScrollTime < scrollCooldown) {
       return;
     }
 
@@ -695,14 +730,17 @@ showcase.addEventListener('wheel', function(e) {
         goToSlide(currentSlideIndex - 1);
       }
     }
-}, { 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) {
+showcase.addEventListener(
+  'touchmove',
+  function (e) {
     if (!touchStartY) return;
 
     const currentTouchY = e.touches[0].clientY;
@@ -715,9 +753,26 @@ showcase.addEventListener('touchmove', function(e) {
       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 {
@@ -725,7 +780,7 @@ showcase.addEventListener('touchmove', function(e) {
     }
 
     const currentTime = new Date().getTime();
-  if (isAnimating || (currentTime - lastScrollTime < scrollCooldown)) {
+    if (isAnimating || currentTime - lastScrollTime < scrollCooldown) {
       return;
     }
 
@@ -743,7 +798,9 @@ showcase.addEventListener('touchmove', function(e) {
       }
       touchStartY = currentTouchY;
     }
-}, { passive: false });
+  },
+  { passive: false }
+);
 
 showcase.addEventListener('touchend', function() {
   touchStartY = 0;