React+Rsuite Dropdown下拉菜单溢出屏幕触发页面滚动怎么解决？

解决方案 #

1. 禁用菜单自动聚焦行为

页面自动滚动的核心原因是Rsuite Dropdown默认会在菜单展开时自动聚焦第一个可交互菜单项，浏览器会自动滚动页面让聚焦元素进入视口，就出现了你遇到的滚动+菜单消失的问题。直接给根Dropdown组件添加menuAutoFocus={false}属性禁用该行为即可：

<Dropdown 
  title="Bookmarks"
  menuAutoFocus={false}
  {/* 其他原有属性 */}
>
  {/* 原有子组件逻辑 */}
</Dropdown>

如果嵌套的子菜单也存在该问题，给Dropdown.Menu也添加autoFocus={false}属性：

<Dropdown.Menu title={Bookmarks.title} autoFocus={false}>
  {/* 子项逻辑 */}
</Dropdown.Menu>

2. 限制菜单最大高度，内部滚动展示

如果菜单项数量过多，建议给菜单添加最大高度限制，超出后内部滚动，避免菜单整体过长超出视口：

<Dropdown 
  title="Bookmarks"
  menuAutoFocus={false}
  menuStyle={{
    maxHeight: '80vh', // 最大高度为当前视口高度的80%
    overflowY: 'auto',
    overflowX: 'hidden'
  }}
>
  {/* 原有子组件逻辑 */}
</Dropdown>

3. 删除无效的强制滚动逻辑

你之前加的setTimeout滚动代码可以直接删掉，和组件默认的聚焦滚动逻辑冲突，反而会加剧页面跳动问题。

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