feat: add switch mouse scroll

hamster1963 · Oct 22, 2024 · 0729aef · 0729aef
1 parent b316875
commit 0729aef
Showing 1 changed file with 31 additions and 3 deletions.
diff --git a/components/Switch.tsx b/components/Switch.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
-import React from "react";
+import React, { useRef, useEffect } from "react";
 
 export default function Switch({
   allTag,
@@ -13,8 +13,36 @@ export default function Switch({
   nowTag: string;
   setTag: (tag: string) => void;
 }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const isOverflowing = container.scrollWidth > container.clientWidth;
+
+    if (!isOverflowing) {
+      return;
+    }
+
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      container.scrollLeft += e.deltaY;
+    };
+
+    container.addEventListener("wheel", onWheel, { passive: false });
+
+    return () => {
+      container.removeEventListener("wheel", onWheel);
+    };
+  }, []);
+
   return (
-    <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
+    <div
+      ref={scrollRef}
+      className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
+    >
       <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
         {allTag.map((tag) => (
           <div
@@ -24,7 +52,7 @@ export default function Switch({
               "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
               nowTag === tag
                 ? "text-black dark:text-white"
-                : "text-stone-400 dark:text-stone-500",
+                : "text-stone-400 dark:text-stone-500"
             )}
           >
             {nowTag === tag && (