实现Vue3侧边栏滚动且嵌套弹出菜单不被容器限制

我用Vue 3、Tailwind CSS和Headless UI开发项目，需要实现侧边栏导航可滚动，同时让嵌套的弹出菜单显示在侧边栏外部。因为后续菜单项会增多，必须开启滚动，但给父元素加overflow-y-scroll后，弹出菜单被限制在侧边栏范围内，无法正常展示，这个问题困扰我好几周了。

当前效果 #

预期效果 #

相关代码 #

<template>
    <div
        :class="[
            !sidebarCollapse ? 'sm:w-52' : 'sm:w-12',
            'hidden sm:fixed sm:bottom-0 sm:left-0 sm:top-12 sm:z-50 sm:block sm:overflow-y-scroll sm:border-r sm:border-gray-200 sm:bg-neutral-50 sm:pb-4',
        ]"
    >
        <div class="border-b border-gray-200">
            <div
                class="flex h-10 w-[calc(3rem-0.0625rem)] shrink-0 items-center justify-center"
            >
                <button
                    type="button"
                    class="p-1.5 text-gray-500 hover:text-gray-600"
                    @click="sidebarCollapse = !sidebarCollapse"
                >
                    <span class="sr-only">Expand sidebar</span>
                    <Bars3Icon class="h-5 w-5" aria-hidden="true" />
                </button>
            </div>
        </div>

        <nav class="mt-8">
            <div class="flex flex-col">
                <ul role="list" class="space-y-1">
                    <li
                        v-for="item in navigation"
                        :key="item.name"
                        class="px-1"
                    >
                        <a
                            v-if="!item.children"
                            :href="item.href"
                            :class="[
                                item.current
                                    ? 'bg-gray-100 '
                                    : 'hover:bg-gray-100',
                                'group flex h-10 w-full items-center justify-center gap-x-3 rounded-md p-2.5 text-standard font-semibold leading-6 text-gray-700',
                            ]"
                        >
                            <span
                                class="-mx-2.5 flex w-10 flex-none items-center justify-center"
                            >
                                <component
                                    :is="item.icon"
                                    class="h-5 w-5 shrink-0 text-gray-400"
                                    aria-hidden="true"
                                />
                            </span>
                            <span
                                :class="[
                                    !sidebarCollapse
                                        ? 'flex-1 items-center'
                                        : 'sr-only',
                                ]"
                            >
                                {{ item.name }}
                            </span>
                        </a>
                        <div v-else>
                            <Disclosure
                                v-if="!sidebarCollapse"
                                as="div"
                                v-slot="{ open }"
                            >
                                <DisclosureButton
                                    :class="[
                                        item.current
                                            ? 'bg-gray-100 '
                                            : 'hover:bg-gray-100',
                                        'group flex h-10 w-full items-center justify-center gap-x-3 rounded-md p-2.5 text-standard font-semibold leading-6 text-gray-700',
                                    ]"
                                >
                                    <span
                                        class="-mx-2.5 flex w-10 flex-none items-center justify-center"
                                    >
                                        <component
                                            :is="item.icon"
                                            class="h-5 w-5 shrink-0 text-gray-400"
                                            aria-hidden="true"
                                        />
                                    </span>
                                    <span
                                        :class="[
                                            !sidebarCollapse
                                                ? 'flex flex-1 items-center'
                                                : 'sr-only',
                                        ]"
                                    >
                                        {{ item.name }}
                                        <ChevronRightIcon
                                            :class="[
                                                open
                                                    ? 'rotate-90 text-gray-500'
                                                    : 'text-gray-400',
                                                'ml-auto h-4 w-4 shrink-0',
                                            ]"
                                            aria-hidden="true"
                                        />
                                    </span>
                                </DisclosureButton>
                                <DisclosurePanel as="ul" class="mt-1 px-2">
                                    <li
                                        v-for="subItem in item.children"
                                        :key="subItem.name"
                                    >
                                        <DisclosureButton
                                            as="a"
                                            :href="subItem.href"
                                            :class="[
                                                subItem.current
                                                    ? 'bg-gray-100'
                                                    : 'hover:bg-gray-100',
                                                'block h-10 w-full rounded-md py-2 pl-9 pr-2 text-standard leading-6 text-gray-700',
                                            ]"
                                        >
                                            <span
                                                :class="[
                                                    !sidebarCollapse
                                                        ? 'flex-1 items-center'
                                                        : 'sr-only',
                                                ]"
                                            >
                                                {{ subItem.name }}
                                            </span>
                                        </DisclosureButton>
                                    </li>
                                </DisclosurePanel>
                            </Disclosure>
                            <Menu v-else as="div" class="relative">
                                <MenuButton
                                    :class="[
                                        item.current
                                            ? 'bg-gray-100'
                                            : 'hover:bg-gray-100',
                                        'group flex h-10 w-full items-center justify-center rounded-md p-2.5 text-standard font-semibold leading-6 text-gray-700',
                                    ]"
                                >
                                    <span
                                        class="-mx-2.5 flex w-10 flex-none items-center justify-center"
                                    >
                                        <component
                                            :is="item.icon"
                                            class="h-5 w-5 shrink-0 text-gray-400"
                                            aria-hidden="true"
                                        />
                                    </span>
                                </MenuButton>
                                <transition
                                    enter-active-class="transition ease-out duration-100"
                                    enter-from-class="transform opacity-0 scale-95"
                                    enter-to-class="transform opacity-100 scale-100"
                                    leave-active-class="transition ease-in duration-75"
                                    leave-from-class="transform opacity-100 scale-100"
                                    leave-to-class="transform opacity-0 scale-95"
                                >
                                    <MenuItems
                                        :class="[
                                            'absolute left-14 top-0 z-10 mt-px w-36 origin-top-right rounded-md bg-white py-2 shadow-md ring-1 ring-gray-900/5 focus:outline-none',
                                        ]"
                                    >
                                        <MenuItem
                                            v-for="subItem in item.children"
                                            :key="subItem.name"
                                            v-slot="{ active }"
                                        >
                                            <a
                                                :href="subItem.href"
                                                :class="[
                                                    active ? 'bg-gray-50' : '',
                                                    'block px-3 py-1 text-standard leading-6 text-gray-500',
                                                ]"
                                            >
                                                {{ subItem.name }}
                                            </a>
                                        </MenuItem>
                                    </MenuItems>
                                </transition>
                            </Menu>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</template>

<script>
import { ref } from 'vue'
import {
    Menu,
    MenuButton,
    MenuItem,
    MenuItems,
    Disclosure,
    DisclosureButton,
    DisclosurePanel,
} from '@headlessui/vue'
import {
    Bars3Icon,
    CalendarIcon,
    ChartPieIcon,
    DocumentDuplicateIcon,
    FolderIcon,
    HomeIcon,
    UsersIcon,
} from '@heroicons/vue/24/outline'
import { ChevronRightIcon } from '@heroicons/vue/20/solid'

const navigation = [
    { name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
    {
        name: 'Teams',
        icon: UsersIcon,
        current: false,
        children: [
            { name: 'Engineering', href: '#' },
            { name: 'Human Resources', href: '#' },
            { name: 'Customer Success', href: '#' },
        ],
    },
    {
        name: 'Projects',
        icon: FolderIcon,
        current: false,
        children: [
            { name: 'GraphQL API', href: '#' },
            { name: 'iOS App', href: '#' },
            { name: 'Android App', href: '#' },
            { name: 'New Customer Portal', href: '#' },
        ],
    },
    { name: 'Calendar', href: '#', icon: CalendarIcon, current: false },
    {
        name: 'Documents',
        href: '#',
        icon: DocumentDuplicateIcon,
        current: false,
    },
    { name: 'Reports', href: '#', icon: ChartPieIcon, current: false },
]

const sidebarCollapse = ref(true)
</script>

解决方案 #

问题根源是父元素设置overflow-y-scroll后，会将所有子元素的定位范围限制在自身内部，包括Headless UI的MenuItems这类绝对定位的弹出层。解决思路是把弹出菜单从滚动容器中“剥离”出来，具体步骤如下：

1. 拆分侧边栏结构，将滚动区域限制在导航内容上 #

把原来的外层滚动容器拆分成两部分：

• 顶部的折叠按钮栏（固定不滚动）
• 下方的导航内容区域（单独设置滚动）

修改后的外层容器去掉overflow-y-scroll，给导航部分的nav添加滚动类：

<template>
    <!-- 外层容器不再设置滚动 -->
    <div
        :class="[
            !sidebarCollapse ? 'sm:w-52' : 'sm:w-12',
            'hidden sm:fixed sm:bottom-0 sm:left-0 sm:top-12 sm:z-50 sm:block sm:border-r sm:border-gray-200 sm:bg-neutral-50',
        ]"
    >
        <!-- 顶部折叠按钮栏代码不变 -->
        <div class="border-b border-gray-200">
            <!-- 按钮代码 -->
        </div>

        <!-- 导航区域单独设置滚动 -->
        <nav class="mt-8 h-[calc(100vh-12rem)] overflow-y-scroll pb-4">
            <!-- 导航内容代码不变 -->
        </nav>
    </div>
</template>

2. 确保弹出菜单的父级不包含滚动属性 #

Headless UI的Menu组件的弹出层MenuItems是相对于带有relative类的父元素定位的。现在滚动只在导航内容区域，而Menu组件的父元素（<li>）不在滚动容器的直接限制内，弹出层就能突破侧边栏范围展示。

3. 微调弹出菜单定位（可选） #

如果弹出菜单位置偏移，可以修改MenuItems的类，把left-14改成left-full，确保完全贴合侧边栏右侧：

<MenuItems
    :class="[
        'absolute left-full top-0 z-10 mt-px w-36 origin-top-left rounded-md bg-white py-2 shadow-md ring-1 ring-gray-900/5 focus:outline-none',
    ]"
>

关键原理总结 #

• 避免给包含弹出层的最外层容器设置overflow属性，只给需要滚动的内容区域单独设置。
• 绝对定位的元素会被父级的overflow属性裁剪，所以要让弹出层的定位父级脱离滚动容器的范围。

内容的提问来源于stack exchange，提问作者ToxifiedM