如何将div锚定到不同DOM树的另一个div？模态框滚动下拉问题求助

嘿，针对你提到的两个问题——跨DOM树锚定div，还有模态框滚动时自定义下拉菜单的错位问题，我整理了实用的解决思路和代码示例，咱们一步步来搞定：

一、跨DOM树的元素锚定实现 #

当两个div不在同一DOM树时，CSS的相对定位肯定没法直接用了，这时候就得靠JavaScript来动态计算位置，还得监听滚动实时更新：

• 第一步：获取目标元素的视口位置
  用getBoundingClientRect()方法就能拿到目标元素相对于浏览器视口的位置参数（top、left、宽度高度这些都有），这个方法非常靠谱，不管元素在哪个DOM分支里都能拿到准确位置。

• 第二步：动态设置锚定元素的位置
  把锚定元素的position设为fixed（如果希望它跟着视口滚动，始终和目标元素保持相对位置）或者absolute（如果要基于整个文档流定位），然后根据目标元素的位置计算出锚定元素的top和left值就行。比如可以把它放在目标元素的右侧，间距自己调。

• 第三步：监听滚动事件实时更新
  不管是页面整体滚动，还是模态框内部滚动，都会改变目标元素的视口位置，所以必须监听scroll事件，每次滚动都重新计算并更新锚定元素的位置。

给你个示例代码参考：

// 先拿到目标元素和要锚定的元素
const targetEl = document.getElementById('target-div');
const anchorEl = document.getElementById('anchor-div');

// 封装更新位置的函数
function updateAnchorPosition() {
  const targetRect = targetEl.getBoundingClientRect();
  // 这里把锚定元素放在目标元素右侧10px的位置，你可以按需调整
  anchorEl.style.position = 'fixed';
  anchorEl.style.top = `${targetRect.top}px`;
  anchorEl.style.left = `${targetRect.right + 10}px`;
  anchorEl.style.width = '200px'; // 随便设个宽度，根据你的需求改
}

// 页面加载时先初始化一次位置
updateAnchorPosition();

// 监听页面滚动和模态框的滚动事件
window.addEventListener('scroll', updateAnchorPosition);
document.querySelector('.modal-container').addEventListener('scroll', updateAnchorPosition);

二、模态框滚动时自定义下拉菜单的定位修复 #

你说的模态框滚动时下拉菜单错位的问题，核心就是要让下拉菜单始终“跟着”触发它的select元素走，哪怕模态框滚动也不跑偏。这里有两个方案，你可以根据自己的DOM结构选：

方案1：把下拉菜单挂载到触发元素的父级下 #

如果可以的话，把自定义下拉菜单的DOM节点直接插到当前行的select元素的父容器里，然后用CSS的绝对定位相对于父容器定位。这样模态框滚动时，下拉菜单会和所在的行一起滚动，根本不会错位。

比如DOM结构可以这么写：

<!-- 模态框里的每一行 -->
<div class="modal-row">
  <div class="select-wrapper">
    <select class="custom-select"></select>
    <!-- 把下拉菜单放在这个wrapper里 -->
    <div class="custom-dropdown"></div>
  </div>
</div>

对应的CSS：

.modal-row {
  position: relative; /* 让下拉菜单相对于这一行定位 */
}
.custom-dropdown {
  position: absolute;
  top: 100%; /* 刚好在select下面 */
  left: 0;
  z-index: 1000; /* 确保不会被其他元素挡住 */
  background: #fff;
  border: 1px solid #ddd;
}

方案2：监听模态框滚动实时更新位置 #

如果下拉菜单必须挂载在其他DOM树（比如body下面），那就在模态框滚动的时候，重新计算触发select的位置，然后更新下拉菜单的坐标。

示例代码：

const modalContainer = document.querySelector('.modal-container');
const customDropdown = document.querySelector('.custom-dropdown');
const triggerSelect = document.querySelector('.custom-select');

// 更新下拉菜单位置的函数
function updateDropdownPosition() {
  const triggerRect = triggerSelect.getBoundingClientRect();
  // 拿到模态框的滚动距离，这个很关键
  const modalScrollTop = modalContainer.scrollTop;
  // 设置下拉菜单的位置，要加上模态框的滚动偏移量
  customDropdown.style.position = 'absolute';
  customDropdown.style.top = `${triggerRect.top + modalScrollTop + triggerRect.height}px`;
  customDropdown.style.left = `${triggerRect.left}px`;
}

// 点击select打开下拉菜单时，先初始化位置，再监听模态框滚动
triggerSelect.addEventListener('click', () => {
  updateDropdownPosition();
  modalContainer.addEventListener('scroll', updateDropdownPosition);
});

// 关闭下拉菜单的时候，记得移除滚动监听，不然会浪费性能
customDropdown.addEventListener('click', () => {
  modalContainer.removeEventListener('scroll', updateDropdownPosition);
});

额外提几个优化点 #

• 模态框设置overflow: auto后，一定要给下拉菜单设足够高的z-index，不然容易被模态框的内容挡住。
• 因为用户可以动态添加行，所以新添加的行里的select元素，也要绑定对应的下拉菜单定位事件，不然新行的下拉菜单还是会出问题哦。

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