如何实现下拉框（Dropdown）在可滚动容器外部显示并解决滚动跟随问题？

我完全懂你的痛点——模态框要保留滚动条，最后一个下拉框展开还得跳出模态框显示，之前去掉position:relative解决了裁剪问题，但滚动时浮层脱节确实头疼。下面给你两个靠谱的解决方案，分UI组件和自定义组件两种场景：

场景1：使用成熟UI组件库（比如Element UI、Ant Design等） #

绝大多数现代UI库的下拉组件都自带了将浮层挂载到body的配置，这是最简单的解决方式：

以Element UI的Dropdown为例，只需要给组件加上append-to-body属性：

<el-dropdown append-to-body>
  <span class="el-dropdown-link">
    表单最后一项下拉<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>选项1</el-dropdown-item>
    <el-dropdown-item>选项2</el-dropdown-item>
    <el-dropdown-item>选项3</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

这个属性会把下拉浮层直接挂载到body元素上，彻底脱离模态框的overflow限制，而且组件内部已经帮你处理了滚动监听——不管模态框怎么滚动，浮层都会自动跟着触发按钮同步移动，完全不用自己写额外逻辑。

如果是Ant Design的Dropdown，对应的属性是getPopupContainer，你可以指定浮层挂载到body：

<Dropdown getPopupContainer={() => document.body}>
  <a className="ant-dropdown-link">
    表单最后一项下拉 <DownOutlined />
  </a>
  <Menu>
    <Menu.Item key="1">选项1</Menu.Item>
    <Menu.Item key="2">选项2</Menu.Item>
    <Menu.Item key="3">选项3</Menu.Item>
  </Menu>
</Dropdown>

场景2：自定义下拉组件 #

如果是你自己手写的下拉逻辑，那需要手动处理浮层的定位和滚动同步：

第一步：让浮层脱离模态框裁剪 #

把下拉浮层的父容器设置为body（或者其他不会被模态框overflow影响的元素），并给浮层设置绝对定位：

/* 模态框样式，保留滚动条 */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 400px;
  overflow: auto;
  z-index: 1000;
}

/* 下拉浮层样式 */
.dropdown-overlay {
  position: absolute;
  z-index: 1001; /* 必须比模态框z-index高 */
  display: none;
  /* 其他样式：背景、边框等 */
}

第二步：监听滚动，同步浮层位置 #

通过JavaScript监听模态框的滚动事件，实时计算触发按钮的页面坐标，更新浮层的位置：

const modal = document.querySelector('.modal');
const triggerBtn = document.querySelector('.dropdown-trigger');
const overlay = document.querySelector('.dropdown-overlay');

// 计算并更新浮层位置的函数
function updateOverlayPos() {
  // 获取触发按钮相对于视口的位置
  const triggerRect = triggerBtn.getBoundingClientRect();
  // 转换为相对于文档的位置（加上页面滚动距离）
  overlay.style.top = `${triggerRect.bottom + window.scrollY}px`;
  overlay.style.left = `${triggerRect.left + window.scrollX}px`;
}

// 点击触发按钮时显示浮层并初始化位置
triggerBtn.addEventListener('click', () => {
  overlay.style.display = overlay.style.display === 'block' ? 'none' : 'block';
  if (overlay.style.display === 'block') {
    updateOverlayPos();
  }
});

// 监听模态框滚动，实时更新浮层位置
modal.addEventListener('scroll', updateOverlayPos);

// 额外监听窗口滚动，确保页面滚动时浮层位置也正确
window.addEventListener('scroll', updateOverlayPos);

这样处理后，下拉浮层既不会被模态框的滚动条裁剪，滚动模态框时也能跟着触发按钮一起移动，完美解决你的两个问题。

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