feat: add ScrollArea

package.json

@@ -9,6 +9,7 @@
     "@headlessui/tailwindcss": "^0.1.2",
     "@heroicons/react": "^2.0.17",
     "@radix-ui/react-progress": "^1.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.1",
     "@tabler/icons-react": "^2.16.0",
     "@tailwindcss/forms": "^0.5.3",

src/pages/Gallery-N/index.tsx

@@ -6,6 +6,7 @@ import Layout from '@/components/Layout'
 import { dictionaries } from '@/resources/dictionary'
 import { DictionaryResource, LanguageCategoryType } from '@/typings'
 import groupBy, { groupByDictTags } from '@/utils/groupBy'
+import * as ScrollArea from '@radix-ui/react-scroll-area'
 import { IconX } from '@tabler/icons-react'
 import { createContext, useCallback, useMemo } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -57,18 +58,21 @@ export default function GalleryPage() {
         <div className="relative mb-auto mt-auto flex w-full flex-1 flex-col overflow-y-auto pl-20">
           <IconX className="absolute right-10 top-5 mr-2 w-10 cursor-pointer text-gray-400" onClick={onBack} />
           <div className="mt-20 flex w-full flex-1 items-start justify-center overflow-y-auto">
-            <div className="h-full max-h-full overflow-y-auto pb-[20rem]">
-              <div className="sticky top-0 flex h-20 w-full items-center justify-between bg-[#faf9ff] pb-8">
-                <LanguageTabSwitcher />
-                <DictRequest />
-              </div>
+            <ScrollArea.Root className="h-full max-h-full overflow-y-auto">
+              <ScrollArea.Viewport className="h-full w-full pb-[20rem]">
+                <div className="sticky top-0 flex h-20 w-full items-center justify-between bg-[#faf9ff] pb-8">
+                  <LanguageTabSwitcher />
+                  <DictRequest />
+                </div>
 
-              <div className="customized-scrollbar mr-4 flex flex-1 flex-col items-start justify-start gap-14 overflow-y-auto">
-                {groupedByCategoryAndTag.map(([category, groupeByTag]) => (
-                  <DictionaryGroup key={category} groupedDictsByTag={groupeByTag} />
-                ))}
-              </div>
-            </div>
+                <div className="mr-4 flex flex-1 flex-col items-start justify-start gap-14 overflow-y-auto">
+                  {groupedByCategoryAndTag.map(([category, groupeByTag]) => (
+                    <DictionaryGroup key={category} groupedDictsByTag={groupeByTag} />
+                  ))}
+                </div>
+              </ScrollArea.Viewport>
+              <ScrollArea.Scrollbar className="flex touch-none select-none bg-transparent " orientation="vertical"></ScrollArea.Scrollbar>
+            </ScrollArea.Root>
             {/* todo: 增加导航 */}
             {/* <div className="w-40 text-center mt-20 h-40 ">
               <CategoryNavigation />

yarn.lock

@@ -1432,6 +1432,15 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-primitive@1.0.2":
   version "1.0.2"
   resolved "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
@@ -1449,6 +1458,22 @@
     "@radix-ui/react-context" "1.0.0"
     "@radix-ui/react-primitive" "1.0.2"
 
+"@radix-ui/react-scroll-area@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.3.tgz#01bbc4df59a166e4a21051a40f017903a0ce7004"
+  integrity sha512-sBX9j8Q+0/jReNObEAveKIGXJtk3xUoSIx4cMKygGtO128QJyVDn01XNOFsyvihKDCTcu7SINzQ2jPAZEhIQtw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-slider@^1.1.1":
   version "1.1.1"
   resolved "https://registry.npmmirror.com/@radix-ui/react-slider/-/react-slider-1.1.1.tgz#5685f23b6244804a5b1f55cee2d321a2acd1878e"