From 1c782e23ad251432385bde2cba64193e05b30cb3 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Mon, 30 May 2022 15:45:51 +0800
Subject: [PATCH] client: hidden scroll bar in tocs

---
 packages/client/src/styles/globals.scss       | 19 +++++++++++++++++++
 .../client/src/tiptap/editor/tocs/index.tsx   |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/styles/globals.scss b/packages/client/src/styles/globals.scss
index b6585b42..37e34317 100644
--- a/packages/client/src/styles/globals.scss
+++ b/packages/client/src/styles/globals.scss
@@ -122,3 +122,22 @@
 .semi-navigation-horizontal .semi-navigation-header {
   margin-right: 0;
 }
+
+.hidden-scrollbar {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
diff --git a/packages/client/src/tiptap/editor/tocs/index.tsx b/packages/client/src/tiptap/editor/tocs/index.tsx
index 95aa9c3b..7d7ab852 100644
--- a/packages/client/src/tiptap/editor/tocs/index.tsx
+++ b/packages/client/src/tiptap/editor/tocs/index.tsx
@@ -1,4 +1,5 @@
 import { Anchor, Tooltip } from '@douyinfe/semi-ui';
+import cls from 'classnames';
 import { throttle } from 'helpers/throttle';
 import { useToggle } from 'hooks/use-toggle';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -122,7 +123,7 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
   if (!headings || !headings.length) return null;
 
   return (
-    <div className={styles.wrapper}>
+    <div className={cls(styles.wrapper, 'hidden-scrollbar ')}>
       <Anchor
         railTheme={collapsed ? 'muted' : 'tertiary'}
         maxHeight={'calc(100vh - 360px)'}