React中overflow-x:scroll容器内下拉菜单无法显示问题

问题原因 #

设置了overflow-x: scroll的容器（MultipleButtonContainer），浏览器会默认将其overflow-y属性设为auto或hidden，导致相对于内部相对定位元素（DropdownBase）绝对定位的下拉项（DropdownItems）被容器裁剪——元素实际存在，但视觉上被滚动容器的溢出规则隐藏。

解决方案 #

方案一：显式设置滚动容器的垂直溢出为可见 #

直接给滚动容器添加overflow-y: visible，覆盖浏览器默认行为：

.MultipleButtonContainer {
  overflow-x: scroll;
  overflow-y: visible; /* 关键：让垂直方向溢出内容可见 */
}

.DropdownBase {
  position: relative;
}

.DropdownItems {
  position: absolute;
  top: 100%; /* 让下拉菜单紧贴触发按钮下方 */
  left: 0;
  z-index: 1000; /* 确保下拉菜单在其他元素上方 */
  background: #fff; /* 避免被下方内容穿透 */
}

方案二：修改下拉菜单的定位上下文 #

如果方案一因浏览器兼容性无效，可将下拉菜单的定位基准转移到滚动容器之外的元素：

1. 给页面中非滚动的外层容器添加position: relative，比如根容器：

.AppRoot {
  position: relative;
}

2. 调整下拉菜单样式，同时通过JS动态计算它相对于触发按钮的位置：

.MultipleButtonContainer {
  overflow-x: scroll;
}

.DropdownBase {
  position: relative;
}

.DropdownItems {
  position: absolute;
  z-index: 1000;
  background: #fff;
}

// 在Dropdown组件中，打开菜单时计算位置
const handleOpenDropdown = () => {
  const dropdownBase = document.querySelector('.DropdownBase');
  const rect = dropdownBase.getBoundingClientRect();
  const rootRect = document.querySelector('.AppRoot').getBoundingClientRect();
  
  // 设置下拉菜单的位置
  setDropdownStyle({
    top: `${rect.bottom - rootRect.top}px`,
    left: `${rect.left - rootRect.left}px`
  });
};

此时下拉菜单会相对于外层非滚动容器定位，不受滚动容器的裁剪规则影响。

内容的提问来源于stack exchange，提问作者Zeynep Tüfekçi