Bulma下拉菜单如何不被外层设置overflow:scroll的滚动容器遮挡

问题本质 #

只要祖先元素设置了非visible值的overflow，就会成为内部定位元素的硬裁切边界。你当前遇到的现象核心是：#scroll-wrapper的overflow-y: scroll属性把绝对定位的Bulma下拉菜单直接裁切掉了，这个效果和设置的z-index高低没有关系。

可落地方案（无需重写Bulma原生组件逻辑） #

方案1：动态挂载下拉菜单到页面根节点（最稳定） #

完全保留Bulma下拉的原生交互、样式规则，仅通过少量JS调整DOM位置：

• 监听滚动容器内下拉触发按钮的点击事件
• 触发激活下拉时，通过getBoundingClientRect()计算触发按钮相对视口的实时坐标
• 将原生dropdown-menu节点临时移动到<body>子级，给节点追加position: fixed样式，匹配刚才计算的坐标值
• 触发下拉关闭（点击空白、选择菜单项、滚动外层容器）时，将菜单节点移回原来的.dropdown容器内部，恢复默认定位逻辑

优势：完全不破坏Bulma组件的原有类名和样式规则，滚动时可以通过监听容器滚动事件实时更新菜单位置，不会出现触发按钮和菜单错位的问题

方案2：修正position: fixed失效问题 #

很多开发者尝试给下拉菜单加position: fixed不生效，本质是祖先链上存在带transform、filter、perspective、will-change属性的元素，导致fixed的定位参考系从视口变成了这个祖先元素，依然会被overflow裁切。
调整步骤：

1. 逐层排查从下拉菜单到<body>之间的所有祖先元素，移除上述会改变定位参考系的非必要属性
2. 给激活状态的下拉菜单追加自定义样式：

.dropdown.is-active .dropdown-menu {
  position: fixed !important;
  z-index: 9999;
  /* 需要通过JS动态写入top、left值，匹配触发按钮的视口坐标，不能依赖默认的absolute偏移 */
}

注意：必须增加滚动监听逻辑，外层容器滚动时实时更新菜单的top/left值，否则会出现触发按钮和下拉菜单位置错位的问题

方案3：激活下拉时临时取消容器裁切（零JS） #

如果不需要长期保留容器的裁切边界，可以利用:has()选择器实现零JS改动：

#scroll-wrapper {
  overflow-y: scroll;
  height: 200px;
}
#scroll-wrapper:has(.dropdown.is-active) {
  /* 当下拉处于激活状态时，临时将容器的overflow改为visible，取消裁切效果 */
  overflow: visible;
}

适用场景：同层级元素没有复杂的z-index堆叠关系，能接受下拉激活时外层容器滚动条临时隐藏的效果

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