Merge pull request #124 from tangly1024/feature_catogory_scroll

滚动目录

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>
 }
 

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>
 }
 

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}/>

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>
 }

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>
 }
 

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}