目录微调

This commit is contained in:
tangly1024
2023-01-01 19:37:54 +08:00
parent fea051cf12
commit 8cf5aea4b5
2 changed files with 7 additions and 5 deletions

View File

@@ -10,10 +10,6 @@ import Progress from './Progress'
* @constructor
*/
const Catalog = ({ toc }) => {
// 无目录就直接返回空
if (!toc || toc.length < 1) {
return <></>
}
// 监听滚动事件
React.useEffect(() => {
window.addEventListener('scroll', actionSectionScrollSpy)
@@ -29,6 +25,7 @@ const Catalog = ({ toc }) => {
// 同步选中目录事件
const [activeSection, setActiveSection] = React.useState(null)
const throttleMs = 100
const actionSectionScrollSpy = React.useCallback(throttle(() => {
const sections = document.getElementsByClassName('notion-h')
@@ -57,6 +54,11 @@ const Catalog = ({ toc }) => {
tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
}, throttleMs))
// 无目录就直接返回空
if (!toc || toc.length < 1) {
return <></>
}
return <div className='px-3'>
<div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
<div className='w-full py-3'>

View File

@@ -63,7 +63,7 @@ const Catalog = ({ toc }) => {
<div className='w-full py-3'>
<Progress />
</div>
<div className='overflow-y-auto overscroll-none scroll-hidden' ref={tRef}>
<div className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden' ref={tRef}>
<nav className='h-full text-black'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)