如何让Antd下拉菜单跟随sticky定位的父组件同步滚动

问题根因 #

1. 你手动给.ant-select-dropdown设置了position: fixed，fixed定位是相对于浏览器视口生效，完全不受父级sticky定位上下文的约束，滚动时自然不会跟随父元素移动。
2. Ant Design Select组件默认会将下拉弹窗挂载到body节点下，脱离了你写的search-section父级DOM结构，父级的定位规则也无法作用于脱离文档流的弹窗。

解决步骤 #

1. 移除错误的fixed定位样式，把.ant-select-dropdown中的position: fixed行删掉即可：

.ant-select-dropdown {
  background-color: $util-dropdown;
  border-radius: 5px;
  box-shadow: 0 0 0 1.5px rgba(91, 91, 91, 0.5),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  /* 删除position: fixed这一行 */
}

2. 指定下拉弹窗的挂载容器，给RepSearch组件内的每个Select组件添加getPopupContainer属性，让弹窗挂载到当前触发元素的父节点下，继承父级的定位上下文：

import { Select } from 'antd';

// RepSearch内的Select组件修改示例
<Select
  // 原有props保持不变
  getPopupContainer={trigger => trigger.parentElement}
/>

如果组件内Select数量较多，也可以在上层用ConfigProvider全局统一配置，避免每个Select重复设置：

import { ConfigProvider } from 'antd';

// 在外层组件（比如App入口、search-section父组件）包裹
<ConfigProvider
  getPopupContainer={node => node ? node.parentElement : document.body}
>
  <div className="inner-dark-section">
    {/* 原有结构保持不变 */}
    <div className="search-section" style={{/* 原有样式 */}}>
      <RepSearch queryProcessor={processQuery} currQuery={currQuery} />
    </div>
  </div>
</ConfigProvider>

注意事项 #

要保证Select的父级容器、search-section节点不要设置overflow: hidden/overflow: auto这类属性，避免下拉弹窗被父容器截断。

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