基于UiShadCn与ReactJS的下拉菜单滚动及最大高度设置问题

要实现下拉菜单的最大高度限制和内容滚动，只需对现有代码做两处关键调整：

1. 将通知列表部分包裹在独立容器中，单独设置滚动样式，避免顶部标题和分隔线随内容滚动
2. 为该容器添加最大高度与垂直滚动属性

修改后的完整代码如下：

<DropdownMenu>
  <DropdownMenuTrigger className="relative h-[43px] flex items-center justify-center scale-110">
    <Bell className="mr-2 h-4 w-4" />
    <span
      className="absolute top-0 right-0 mt-1 mr-1 text-[12px] bg-red-500 text-white w-4 h-4 rounded-full flex items-center justify-center"
    >
      {notificationsData ? notificationsData.length : 0}
    </span>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>Notificações</DropdownMenuLabel>
    <DropdownMenuSeparator />

    {/* 新增滚动容器，限制最大高度并开启垂直滚动 */}
    <div className="max-h-[400px] overflow-y-auto pr-2">
      {notificationsData && notificationsData.length > 0 ? (
        notificationsData.map((item, index) => (
          <DropdownMenuGroup key={index}>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger className="flex items-center">
                {item.medicineDaysSupplied <= 5 ? (
                  <XCircle className='mr-2 h-4 w-4 text-red-600' />
                ) : (
                  <AlertTriangle className='mr-2 h-4 w-4 text-yellow-500' />
                )}
                <div>
                  {item.medicineNameAlert}
                  <h5 className='text-[12px]'>{item.guestNameAlert}</h5>
                </div>
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  <DropdownMenuItem>
                    <PersonStanding className="mr-2 h-4 w-4" />
                    <span>Ir para o hóspede</span>
                  </DropdownMenuItem>
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
              <DropdownMenuSeparator />
            </DropdownMenuSub>
          </DropdownMenuGroup>
        ))
      ) : (
        <DropdownMenuItem disabled>
          <span>Não há nada por aqui</span>
        </DropdownMenuItem>
      )}
    </div>
  </DropdownMenuContent>
</DropdownMenu>

细节说明 #

• max-h-[400px]：可根据界面布局需求调整最大高度值
• overflow-y-auto：内容高度超过限制时自动显示垂直滚动条
• pr-2：给容器右侧添加内边距，避免滚动条与内容紧贴，提升视觉体验

如果希望整个下拉菜单（包括标题）都能滚动，也可以直接给DropdownMenuContent添加样式：

<DropdownMenuContent className="w-56 max-h-[450px] overflow-y-auto">
  {/* 原有内容 */}
</DropdownMenuContent>

但这种方式会让标题随内容滚动，通常推荐第一种保留固定标题的方案。

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