React项目中Radix UI Dropdown Menu打开时页面滚动锁定问题

Radix UI的Dropdown Menu组件默认启用了preventScroll属性，这会在菜单打开时锁定页面滚动。要让背景内容保持可滚动，只需要在根组件DropdownMenu.Root上显式设置preventScroll={false}即可。

示例代码 #

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

function CustomDropdown() {
  return (
    <DropdownMenu.Root preventScroll={false}>
      <DropdownMenu.Trigger className="dropdown-trigger">
        点击打开菜单
      </DropdownMenu.Trigger>
      <DropdownMenu.Content className="dropdown-content">
        <DropdownMenu.Item>菜单选项1</DropdownMenu.Item>
        <DropdownMenu.Item>菜单选项2</DropdownMenu.Item>
        <DropdownMenu.Item>菜单选项3</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

额外优化（可选） #

如果菜单选项较多、内容过长，建议给DropdownMenu.Content设置最大高度和内部滚动，避免菜单超出视口：

<DropdownMenu.Content 
  style={{ 
    maxHeight: '350px', 
    overflowY: 'auto',
    padding: '8px 0'
  }}
>
  {/* 这里放置所有菜单选项 */}
</DropdownMenu.Content>

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