upd

client/src/components/Test/FloorItem.tsx

@@ -26,7 +26,7 @@ function FloorItem({ floor, onSelected }: Props) {
       } else {
         setSelected(false);
       }
-    }, 50);
+    }, 0);
   }, []);
 
   return (

client/src/pages/ComplexWingPage.tsx

@@ -59,6 +59,7 @@ function ComplexWingPage() {
   const [selectedFloor, setSelectedFloor] = useState<string>();
   // const [showFloorPlanSidebar, setShowFloorPlanSidebar] = useState(false);
   const refFloors = useRef<HTMLDivElement>(null);
+  const [scrolled, setScrolled] = useState(false);
 
   function handleResize() {
     if (window.innerHeight > window.innerWidth) {
@@ -97,6 +98,32 @@ function ComplexWingPage() {
     setImageHeight(ref.current!.naturalHeight);
   }
 
+  function scrollNext() {
+    setScrolled(true);
+
+    refFloors.current?.scrollBy({
+      left: 84,
+      behavior: "smooth",
+    });
+
+    setTimeout(() => {
+      setScrolled(false);
+    }, 250);
+  }
+
+  function scrollPrev() {
+    setScrolled(true);
+
+    refFloors.current?.scrollBy({
+      left: -84,
+      behavior: "smooth",
+    });
+
+    setTimeout(() => {
+      setScrolled(false);
+    }, 250);
+  }
+
   useEffect(() => {
     handleResize();
 
@@ -109,7 +136,7 @@ function ComplexWingPage() {
 
   return (
     <div
-      className="relative overflow-hidden h-dvh"
+      className="relative max-h-screen overflow-hidden h-dvh"
       onMouseMove={handleMouseMove}
     >
       <Header />
@@ -535,24 +562,14 @@ function ComplexWingPage() {
                 icon={<ArrowLeftIcon className="w-4 h-4" />}
                 onlyIcon
                 className="absolute top-0 left-0 ring-0 w-9 h-9"
-                onClick={() =>
-                  refFloors.current?.scrollBy({
-                    left: -32,
-                    behavior: "smooth",
-                  })
-                }
+                onClick={() => !scrolled && scrollPrev()}
               />
               <Button3
                 variant="secondary"
                 icon={<ArrowRightIcon className="w-4 h-4" />}
                 onlyIcon
                 className="absolute top-0 right-0 ring-0 w-9 h-9"
-                onClick={() =>
-                  refFloors.current?.scrollBy({
-                    left: 32,
-                    behavior: "smooth",
-                  })
-                }
+                onClick={() => !scrolled && scrollNext()}
               />
             </div>
           </div>