d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-28 15:10:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #187 from tangly1024/feature_catelog_scrollbar

Browse Source 
目录滚动条隐藏
This commit is contained in:
tangly1024
2022-04-19 15:07:44 +08:00
committed by GitHub
parent f436267f8b 59ad42b278
commit ea0c3fd379
4 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
themes/fukasawa/components/Catalog.js
View File

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

6
themes/hexo/components/Catalog.js
View File

@@ -60,9 +60,9 @@ const Catalog = ({ toc }) => {
return <div className='px-3'> return <div className='px-3'>
<div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div> <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
<div className='w-full py-3'> <div className='w-full py-3'>
<Progress/> <Progress />
</div> </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'> <nav className='h-full font-sans text-black'>
{toc.map((tocItem) => { {toc.map((tocItem) => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)
@@ -75,7 +75,7 @@ const Catalog = ({ toc }) => {
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `} notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
> >
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} <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} {tocItem.text}
</span> </span>

16
themes/medium/components/Catalog.js
View File

@@ -59,9 +59,9 @@ const Catalog = ({ toc }) => {
return <div className='px-3'> return <div className='px-3'>
<div className='w-full mt-2 mb-4'> <div className='w-full mt-2 mb-4'>
<Progress/> <Progress />
</div> </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'> <nav className='h-full font-sans text-black'>
{toc.map((tocItem) => { {toc.map((tocItem) => {
const id = uuidToId(tocItem.id) 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 className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `} notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
> >
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
className={`${activeSection === id && ' font-bold text-green-500 underline'}`} className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
> >
{tocItem.text} {tocItem.text}
</span> </span>
</a> </a>
) )
})} })}
</nav> </nav>
</div> </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> </div>
} }

2
themes/next/components/Toc.js
View File

@@ -62,7 +62,7 @@ const Toc = ({ toc }) => {
<div className='w-full pb-1'> <div className='w-full pb-1'>
<Progress /> <Progress />
</div> </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'> <nav className='h-full font-sans text-black dark:text-gray-300'>
{toc.map((tocItem) => { {toc.map((tocItem) => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)