overflow: scroll的div内部z-index不生效，下拉框被截断如何解决？

问题根源 #

你遇到的截断问题和z-index无关，是带overflow-y: scroll属性的容器会默认裁剪所有超出自身边界的内部子元素，只要你的下拉选项容器还在这个滚动容器的DOM节点内部，不管设置多高的z-index都无法突破父容器的裁剪规则。

解决方案（推荐使用Portal挂载方案） #

直接把下拉选项容器动态挂载到<body>的直接子节点，脱离滚动容器的DOM结构，再通过计算下拉按钮的视口坐标定位下拉选项，完全不受滚动容器的overflow限制。

代码修改步骤

1. 给下拉选项容器的CSS加上全局层级：

.nts-fakeDropdownOptionsContainer {
  z-index: 9999 !important;
  /* 原有属性保留 */
}

2. 修改JavaScript逻辑，增加位置计算和DOM移动逻辑：

function findAll_fakeDropdownBtn() {
  return document.querySelectorAll('.nts-fakeDropdownBtn');
}
function findAll_fakeDropdownOptionsContainer() {
  return document.querySelectorAll('.nts-fakeDropdownOptionsContainer');
}
// 点击外部关闭下拉的全局监听
document.addEventListener('click', function(e) {
  if (!e.target.closest('.is-ddconpart') && !e.target.closest('.nts-fakeDropdownBtn')) {
    document.querySelectorAll('.nts-fakeDropdownOptionsContainer-displaying').forEach(el => {
      el.classList.remove('nts-fakeDropdownOptionsContainer-displaying')
    })
  }
})
// 滚动时更新下拉位置
window.addEventListener('scroll', updateDropdownPosition, true)

function updateDropdownPosition() {
  const activeDropdown = document.querySelector('.nts-fakeDropdownOptionsContainer-displaying')
  if (!activeDropdown) return
  const btnId = activeDropdown.id.replace('fakeDropdownOptionsContainer', 'fakeDropdownBtn')
  const btn = document.querySelector(`#${btnId}`)
  if (!btn) return
  const btnRect = btn.getBoundingClientRect()
  activeDropdown.style.left = `${btnRect.left}px`
  activeDropdown.style.top = `${btnRect.top + btn.offsetHeight}px`
}

window.onload = function () {
  findAll_fakeDropdownBtn().forEach(function(fakeDropdownBtn) {
    fakeDropdownBtn.addEventListener('click', function(event) {
      event.stopPropagation()
      var ddocId = fakeDropdownBtn.dataset.ddocId;
      var fakeDropdownOptionsContainer = document.querySelector('#'+ddocId);
      // 先把所有其他打开的下拉关闭
      document.querySelectorAll('.nts-fakeDropdownOptionsContainer-displaying').forEach(el => {
        if (el.id !== ddocId) el.classList.remove('nts-fakeDropdownOptionsContainer-displaying')
      })
      var isDisplaying = fakeDropdownOptionsContainer.classList.contains('nts-fakeDropdownOptionsContainer-displaying');
      if (isDisplaying) {
        fakeDropdownOptionsContainer.classList.remove('nts-fakeDropdownOptionsContainer-displaying');
      } else {
        // 把下拉容器移到body下
        document.body.appendChild(fakeDropdownOptionsContainer)
        // 计算位置
        const btnRect = fakeDropdownBtn.getBoundingClientRect()
        fakeDropdownOptionsContainer.style.position = 'fixed'
        fakeDropdownOptionsContainer.style.left = `${btnRect.left}px`
        fakeDropdownOptionsContainer.style.top = `${btnRect.top + fakeDropdownBtn.offsetHeight}px`
        fakeDropdownOptionsContainer.classList.add('nts-fakeDropdownOptionsContainer-displaying');
      }
    });
  });
  findAll_fakeDropdownOptionsContainer().forEach(function(fakeDropdownOptionsContainer) {
    fakeDropdownOptionsContainer.querySelectorAll('.nts-dropdown-option').forEach(function(dropdownOptionElm) {
      dropdownOptionElm.addEventListener('click', function(event) {
        event.stopPropagation()
        dropdownOptionElm.classList.toggle('nts-dropdown-option-selected');
      });
    });
  });
}

折中方案（不修改DOM结构） #

如果你的下拉选项数量不多，可以修改下拉的弹出方向，判断按钮在滚动容器内的剩余高度不足时，向上弹出选项：

// 在原来显示下拉的逻辑中增加以下判断
const scrollContainer = fakeDropdownBtn.closest('[style*="overflow-y: scroll"]')
const containerRect = scrollContainer.getBoundingClientRect()
const btnRect = fakeDropdownBtn.getBoundingClientRect()
const optionsHeight = fakeDropdownOptionsContainer.offsetHeight
const bottomSpace = containerRect.bottom - btnRect.bottom
if (bottomSpace < optionsHeight) {
  // 向上弹出
  fakeDropdownOptionsContainer.style.bottom = `${fakeDropdownBtn.offsetHeight}px`
  fakeDropdownOptionsContainer.style.top = 'auto'
} else {
  // 向下弹出
  fakeDropdownOptionsContainer.style.top = `${fakeDropdownBtn.offsetHeight}px`
  fakeDropdownOptionsContainer.style.bottom = 'auto'
}

内容的提问来源于stack exchange，提问作者code đờ