From 73bee68ac039a3f41c7a096da260f83fd78ce863 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 29 Mar 2022 13:15:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/fukasawa/components/Catalog.js | 53 +++++++++++++++------------
 themes/hexo/components/Catalog.js     | 52 ++++++++++++++------------
 themes/hexo/components/TocDrawer.js   |  4 +-
 themes/medium/components/Catalog.js   | 53 +++++++++++++++------------
 themes/next/components/Toc.js         | 51 ++++++++++++++------------
 themes/next/components/TocDrawer.js   |  4 +-
 6 files changed, 118 insertions(+), 99 deletions(-)

diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
index 477a325e..c4425454 100644
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 
@@ -22,6 +22,10 @@ const Catalog = ({ toc }) => {
     }
   }, [])
 
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
   // 同步选中目录事件
   const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
@@ -48,33 +52,34 @@ const Catalog = ({ toc }) => {
       break
     }
     setActiveSection(currentSectionId)
+    const index = tocIds.indexOf(currentSectionId) || 0
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
   }, throttleMs))
 
   return <div>
     <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' /> 目录</div>
-    <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
-      {toc.map((tocItem) => {
-        const id = uuidToId(tocItem.id)
-        return (
-          <a
-            key={id}
-            href={`#${id}`}
-            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>
-          </a>
-        )
-      })}
-    </nav>
+    <div className='overflow-y-auto max-h-96' ref={tRef}>
+      <nav className='h-full font-sans text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          tocIds.push(id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              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>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
   </div>
 }
 
diff --git a/themes/hexo/components/Catalog.js b/themes/hexo/components/Catalog.js
index 8045800d..8b1db5f0 100644
--- a/themes/hexo/components/Catalog.js
+++ b/themes/hexo/components/Catalog.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -23,6 +23,10 @@ const Catalog = ({ toc }) => {
     }
   }, [])
 
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
   // 同步选中目录事件
   const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
@@ -49,6 +53,8 @@ const Catalog = ({ toc }) => {
       break
     }
     setActiveSection(currentSectionId)
+    const index = tocIds.indexOf(currentSectionId) || 0
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
   }, throttleMs))
 
   return <div className='px-3'>
@@ -56,29 +62,29 @@ const Catalog = ({ toc }) => {
     <div className='w-full py-3'>
       <Progress/>
     </div>
-    <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
-      {toc.map((tocItem) => {
-        const id = uuidToId(tocItem.id)
-        return (
-          <a
-            key={id}
-            href={`#${id}`}
-            className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+    <div className='overflow-y-auto max-h-36 lg:max-h-96' ref={tRef}>
+      <nav className='h-full font-sans text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          tocIds.push(id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
             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'}`}
-                      >
-                        {tocItem.text}
-                      </span>
-          </a>
-        )
-      })}
-    </nav>
+            >
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                    className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+
+    </div>
   </div>
 }
 
diff --git a/themes/hexo/components/TocDrawer.js b/themes/hexo/components/TocDrawer.js
index 54cad1fb..7df6d309 100644
--- a/themes/hexo/components/TocDrawer.js
+++ b/themes/hexo/components/TocDrawer.js
@@ -24,8 +24,8 @@ const TocDrawer = ({ post, cRef }) => {
       {/* 侧边菜单 */}
       <div
         className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' shadow-card animate__animated animate__faster h-36 ' +
-        ' w-60 duration-200 fixed right-12 bottom-12 rounded overflow-y-auto py-2 bg-white dark:bg-gray-600'}>
+        ' shadow-card animate__animated animate__faster' +
+        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-600'}>
           {post && <>
            <div className='dark:text-gray-400 text-gray-600'>
              <Catalog toc={post.toc}/>
diff --git a/themes/medium/components/Catalog.js b/themes/medium/components/Catalog.js
index 3c3bbebc..7da94669 100644
--- a/themes/medium/components/Catalog.js
+++ b/themes/medium/components/Catalog.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -23,6 +23,10 @@ const Catalog = ({ toc }) => {
     }
   }, [])
 
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
   // 同步选中目录事件
   const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
@@ -49,35 +53,36 @@ const Catalog = ({ toc }) => {
       break
     }
     setActiveSection(currentSectionId)
+    const index = tocIds.indexOf(currentSectionId) || 0
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
   }, throttleMs))
 
   return <div className='px-3'>
     <div className='w-full py-1'>
       <Progress/>
     </div>
-    <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
-      {toc.map((tocItem) => {
-        const id = uuidToId(tocItem.id)
-        return (
-          <a
-            key={id}
-            href={`#${id}`}
-            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>
-          </a>
-        )
-      })}
-    </nav>
+    <div className='overflow-y-auto max-h-96' ref={tRef}>
+      <nav className='h-full font-sans text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          tocIds.push(id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              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>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
     <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200'/>
   </div>
 }
diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js
index 22ca4bc0..44202ccd 100644
--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -24,6 +24,10 @@ const Toc = ({ toc }) => {
     }
   }, [])
 
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
   // 同步选中目录事件
   const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
@@ -50,35 +54,34 @@ const Toc = ({ toc }) => {
       break
     }
     setActiveSection(currentSectionId)
+    const index = tocIds.indexOf(currentSectionId) || 0
+    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
   }, throttleMs))
 
   return <div className='px-3'>
     <div className='w-full pb-1'>
       <Progress/>
     </div>
-    <nav className='font-sans overflow-y-auto scroll-hidden'>
-      {toc.map((tocItem) => {
-        const id = uuidToId(tocItem.id)
-        return (
-          <a
-            key={id}
-            href={`#${id}`}
-            className={`notion-table-of-contents-item duration-300 transform font-light
-            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>
-          </a>
-        )
-      })}
-    </nav>
+    <div className='overflow-y-auto max-h-96' ref={tRef}>
+      <nav className='h-full font-sans text-black'>
+        {toc.map((tocItem) => {
+          const id = uuidToId(tocItem.id)
+          tocIds.push(id)
+          return (
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`notion-table-of-contents-item duration-300 transform font-light
+              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>
+            </a>
+          )
+        })}
+      </nav>
+    </div>
   </div>
 }
 
diff --git a/themes/next/components/TocDrawer.js b/themes/next/components/TocDrawer.js
index 72cbefe3..83861934 100644
--- a/themes/next/components/TocDrawer.js
+++ b/themes/next/components/TocDrawer.js
@@ -26,8 +26,8 @@ const TocDrawer = ({ post, cRef }) => {
       {/* 侧边菜单 */}
       <div
         className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' shadow-card animate__animated animate__faster max-h-96 ' +
-        ' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto py-2 bg-white dark:bg-gray-600'}>
+        ' shadow-card animate__animated animate__faster ' +
+        ' w-60 duration-200 fixed right-4 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
           {post && <>
             <div className='font-bold pb-2 text-center text-black dark:text-white '>
               {locale.COMMON.TABLE_OF_CONTENTS}