feat: better overlayscrollbar

package.json

@@ -52,7 +52,6 @@
     "md5": "^2.3.0",
     "ofetch": "^1.4.1",
     "overlayscrollbars": "^2.10.0",
-    "overlayscrollbars-react": "^0.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-use": "^17.5.1",

src/components/column/card.tsx

@@ -159,7 +159,7 @@ function NewsCard({ id, setHandleRef }: NewsCardProps) {
         options={{
           overflow: { x: "hidden" },
         }}
-        defer={false}
+        defer
       >
         <div className={$("transition-opacity-500", isFetching && "op-20")}>
           {!!data?.items?.length && (sources[id].type === "hottest" ? <NewsListHot items={data.items} /> : <NewsListTimeLine items={data.items} />)}

src/components/common/overlay-scrollbar.tsx → src/components/common/overlay-scrollbar/index.tsx

@@ -1,9 +1,10 @@
-import type { UseOverlayScrollbarsParams } from "overlayscrollbars-react"
-import { useOverlayScrollbars } from "overlayscrollbars-react"
 import type { HTMLProps, PropsWithChildren } from "react"
 import { defu } from "defu"
 import { useMount } from "react-use"
+import { useOverlayScrollbars } from "./useOverlayScrollbars"
+import type { UseOverlayScrollbarsParams } from "./useOverlayScrollbars"
 import { goToTopAtom } from "~/atoms"
+import "./style.css"
 
 type Props = HTMLProps<HTMLDivElement> & UseOverlayScrollbarsParams
 const defaultScrollbarParams: UseOverlayScrollbarsParams = {
@@ -15,15 +16,15 @@ const defaultScrollbarParams: UseOverlayScrollbarsParams = {
   defer: true,
 }
 
-export function OverlayScrollbar({ disabled, children, options, events, defer, ...props }: PropsWithChildren<Props>) {
+export function OverlayScrollbar({ disabled, children, options, events, defer, className, ...props }: PropsWithChildren<Props>) {
   const ref = useRef<HTMLDivElement>(null)
   const scrollbarParams = useMemo(() => defu<UseOverlayScrollbarsParams, Array<UseOverlayScrollbarsParams> >({
     options,
     events,
     defer,
   }, defaultScrollbarParams), [options, events, defer])
 
-  const [initialize] = useOverlayScrollbars(scrollbarParams)
+  const [initialize, instance] = useOverlayScrollbars(scrollbarParams)
 
   useMount(() => {
     if (!disabled) {
@@ -37,15 +38,25 @@ export function OverlayScrollbar({ disabled, children, options, events, defer, .
     }
   })
 
+  useEffect(() => {
+    if (ref.current) {
+      if (instance && instance?.state().destroyed) {
+        ref.current.classList.remove("scrollbar-hidden")
+      } else {
+        ref.current.classList.add("scrollbar-hidden")
+      }
+    }
+  }, [instance])
+
   return (
-    <div ref={ref} {...props}>
+    <div ref={ref} {...props} className={$("overflow-auto scrollbar-hidden", className)}>
       {/* 只能有一个 element */}
       <div>{children}</div>
     </div>
   )
 }
 
-export function GlobalOverlayScrollbar({ children, ...props }: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
+export function GlobalOverlayScrollbar({ children, className, ...props }: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
   const ref = useRef<HTMLDivElement>(null)
   const lastTrigger = useRef(0)
   const timer = useRef<any>()
@@ -67,7 +78,7 @@ export function GlobalOverlayScrollbar({ children, ...props }: PropsWithChildren
       )
     }
   }, [setGoToTop])
-  const [initialize] = useOverlayScrollbars({
+  const [initialize, instance] = useOverlayScrollbars({
     options: {
       scrollbars: {
         autoHide: "scroll",
@@ -76,7 +87,7 @@ export function GlobalOverlayScrollbar({ children, ...props }: PropsWithChildren
     events: {
       scroll: (_, e) => onScroll(e),
     },
-    defer: false,
+    defer: true,
   })
 
   useMount(() => {
@@ -95,8 +106,18 @@ export function GlobalOverlayScrollbar({ children, ...props }: PropsWithChildren
     }
   })
 
+  useEffect(() => {
+    if (ref.current) {
+      if (instance && instance?.state().destroyed) {
+        ref.current.classList.remove("scrollbar-hidden")
+      } else {
+        ref.current?.classList.add("scrollbar-hidden")
+      }
+    }
+  }, [instance])
+
   return (
-    <div ref={ref} {...props}>
+    <div ref={ref} {...props} className={$("overflow-auto scrollbar-hidden", className)}>
       <div>{children}</div>
     </div>
   )

src/components/common/overlay-scrollbar/style.css

@@ -0,0 +1,12 @@
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+}
+
+.scrollbar-hidden {
+  scrollbar-width: none;
+}
+.scrollbar-hidden::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}