如何在页面滚动时固定Ant Design的DropDownList组件位置

针对不同的固定需求，可按对应方案实现： #

场景1：Dropdown触发按钮本身固定不随页面滚动 #

直接给按钮外层容器加fixed定位即可，可根据需求调整位置参数：

/* 自定义样式 */
.fixed-dropdown-trigger {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 999;
}

组件绑定类名：

<div className="fixed-dropdown-trigger">
  <Dropdown menu={{ items }}>
    <Button>下拉菜单</Button>
  </Dropdown>
</div>

场景2：Dropdown展开的下拉菜单固定在触发按钮旁，滚动时不错位 #

出现滚动错位的核心原因是AntD默认将下拉弹出层挂载到body节点下，当滚动容器不是body时，弹出层位置就会和触发按钮错位，只需修改getPopupContainer属性，将弹出层挂载到触发元素的父容器即可：

<Dropdown
  menu={{ items }}
  // 配置弹出层挂载容器
  getPopupContainer={(triggerNode) => triggerNode.parentElement}
>
  <Button>下拉菜单</Button>
</Dropdown>

如果是使用Select组件的下拉列表，配置逻辑完全一致：

<Select
  getPopupContainer={(triggerNode) => triggerNode.parentElement}
  options={options}
/>

场景3：下拉菜单单独固定在视口指定位置 #

如果不需要下拉菜单跟随触发按钮，要固定在视口某个位置，可通过自定义弹出层类名实现：

.fixed-dropdown-menu {
  position: fixed !important;
  top: 60px !important;
  right: 30px !important;
}

组件绑定自定义类：

<Dropdown
  menu={{ items }}
  overlayClassName="fixed-dropdown-menu"
>
  <Button>下拉菜单</Button>
</Dropdown>

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