Locked scroll in merch popup overlay

Sahan-Daksh · Aug 4, 2024 · a0b35a5 · a0b35a5
1 parent d83ab97
commit a0b35a5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/assets/styles/pages/layouts/Merch.css b/src/assets/styles/pages/layouts/Merch.css
@@ -199,6 +199,10 @@ font-style: normal;
     opacity: 0.7;
 }
 
+.no-scroll{
+    overflow: hidden;
+}
+
 /* Mobile-specific styles */
 
 @media (max-width: 600px) {

diff --git a/src/pages/layouts/Merch.jsx b/src/pages/layouts/Merch.jsx
@@ -10,10 +10,12 @@ export default function Merch() {
   const handleCardClick = (product) => {
     setSelectedProduct(product);
     setCurrentImageIndex(0); // Reset image index
+    document.body.style.overflow = 'hidden'; // Prevent background scroll
   };
 
   const handleClosePopup = () => {
     setSelectedProduct(null);
+    document.body.style.overflow = 'auto'; // Restore background scroll
   };
 
   const handleThumbnailClick = (index) => {
@@ -78,11 +80,6 @@ export default function Merch() {
           >
             <motion.div
               className="merch-popup"
-              style={{
-                backgroundColor: "black",
-                color: "white",
-                borderColor: "white",
-              }}
               initial={{ y: "-100vh" }}
               animate={{ y: 0 }}
               exit={{ y: "100vh" }}