client: hidden scroll bar in tocs

This commit is contained in:
fantasticit 2022-05-30 15:45:51 +08:00
parent a26da9c2b9
commit 1c782e23ad
2 changed files with 21 additions and 1 deletions

View File

@ -122,3 +122,22 @@
.semi-navigation-horizontal .semi-navigation-header { .semi-navigation-horizontal .semi-navigation-header {
margin-right: 0; margin-right: 0;
} }
.hidden-scrollbar {
::-webkit-scrollbar {
width: 0;
height: 0;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
}

View File

@ -1,4 +1,5 @@
import { Anchor, Tooltip } from '@douyinfe/semi-ui'; import { Anchor, Tooltip } from '@douyinfe/semi-ui';
import cls from 'classnames';
import { throttle } from 'helpers/throttle'; import { throttle } from 'helpers/throttle';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
@ -122,7 +123,7 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
if (!headings || !headings.length) return null; if (!headings || !headings.length) return null;
return ( return (
<div className={styles.wrapper}> <div className={cls(styles.wrapper, 'hidden-scrollbar ')}>
<Anchor <Anchor
railTheme={collapsed ? 'muted' : 'tertiary'} railTheme={collapsed ? 'muted' : 'tertiary'}
maxHeight={'calc(100vh - 360px)'} maxHeight={'calc(100vh - 360px)'}