diff --git "a/docs/notes/theme/config/\344\270\273\351\242\230\351\205\215\347\275\256.md" "b/docs/notes/theme/config/\344\270\273\351\242\230\351\205\215\347\275\256.md" index e477a56d..bde0fe2a 100644 --- "a/docs/notes/theme/config/\344\270\273\351\242\230\351\205\215\347\275\256.md" +++ "b/docs/notes/theme/config/\344\270\273\351\242\230\351\205\215\347\275\256.md" @@ -657,6 +657,14 @@ interface SidebarItem { } ``` +### sidebarScrollbar + +- 类型: `boolean` +- 默认值: `true` +- 详情: 是否显示侧边栏滚动条 + + 设置为 `false` 时,仅隐藏滚动条,但不改变滚动行为。 + ### aside - 类型: `boolean | 'left'` diff --git a/theme/src/client/components/VPSidebar.vue b/theme/src/client/components/VPSidebar.vue index f0607a5e..0954e11e 100644 --- a/theme/src/client/components/VPSidebar.vue +++ b/theme/src/client/components/VPSidebar.vue @@ -4,13 +4,14 @@ import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue' import { useScrollLock } from '@vueuse/core' import { onMounted, ref, watch } from 'vue' import { useRoutePath } from 'vuepress/client' -import { useSidebar } from '../composables/index.js' +import { useData, useSidebar } from '../composables/index.js' import { inBrowser } from '../utils/index.js' const props = defineProps<{ open: boolean }>() +const { theme } = useData() const { sidebarGroups, hasSidebar, sidebarKey } = useSidebar() const routePath = useRoutePath() @@ -52,7 +53,7 @@ onMounted(() => { v-if="hasSidebar" ref="navEl" class="vp-sidebar" - :class="{ open }" + :class="{ open, 'hide-scrollbar': !(theme.sidebarScrollbar ?? true) }" vp-sidebar @click.stop > @@ -114,6 +115,15 @@ onMounted(() => { transform: translateX(0); } +.vp-sidebar.hide-scrollbar { + scrollbar-width: none; +} + +.vp-sidebar.hide-scrollbar::-webkit-scrollbar { + width: 0; + height: 0; +} + [data-theme="dark"] .vp-sidebar { box-shadow: var(--vp-shadow-1); } diff --git a/theme/src/shared/options/locale.ts b/theme/src/shared/options/locale.ts index e9a33841..7dcdbfec 100644 --- a/theme/src/shared/options/locale.ts +++ b/theme/src/shared/options/locale.ts @@ -77,6 +77,12 @@ export interface PlumeThemeLocaleData extends LocaleData { */ sidebar?: SidebarMulti + /** + * 是否显示侧边栏滚动条 + * @default true + */ + sidebarScrollbar?: boolean + /** * 要显示的标题级别。 *