Merge pull request #187 from tangly1024/feature_catelog_scrollbar

目录滚动条隐藏

themes/fukasawa/components/Catalog.js

@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
 
   return <div>
     <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' /> 目录</div>
-    <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
+    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
@@ -70,11 +70,11 @@ const Catalog = ({ toc }) => {
               className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
-                <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                  className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
-                >
-                  {tocItem.text}
-                </span>
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
+              >
+                {tocItem.text}
+              </span>
             </a>
           )
         })}

themes/hexo/components/Catalog.js

@@ -60,9 +60,9 @@ const Catalog = ({ toc }) => {
   return <div className='px-3'>
     <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
     <div className='w-full py-3'>
-      <Progress/>
+      <Progress />
     </div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none' ref={tRef}>
+    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
@@ -75,7 +75,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                    className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
+                className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
               >
                 {tocItem.text}
               </span>

themes/medium/components/Catalog.js

@@ -59,9 +59,9 @@ const Catalog = ({ toc }) => {
 
   return <div className='px-3'>
     <div className='w-full mt-2 mb-4'>
-      <Progress/>
+      <Progress />
     </div>
-    <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
+    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full font-sans text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
@@ -73,17 +73,17 @@ const Catalog = ({ toc }) => {
               className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
-                <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                  className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
-                >
-                  {tocItem.text}
-                </span>
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
+              >
+                {tocItem.text}
+              </span>
             </a>
           )
         })}
       </nav>
     </div>
-    <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200'/>
+    <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' />
   </div>
 }
 

themes/next/components/Toc.js

@@ -62,7 +62,7 @@ const Toc = ({ toc }) => {
     <div className='w-full pb-1'>
       <Progress />
     </div>
-    <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
+    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full font-sans text-black dark:text-gray-300'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)