Angular8+PrimeNG8层级菜单滚动时子菜单被截断问题求助

我明白你遇到的困扰了——当给主菜单容器加上固定高度和垂直滚动后，子菜单会被容器的溢出裁剪效果挡住。这是因为默认情况下子菜单是相对于主菜单容器定位的，而容器的overflow-y: auto属性会自动裁剪掉超出容器范围的内容。

下面给你几个可行的解决方案，按推荐优先级排序：

方案1：使用PrimeNG官方的appendTo属性（最推荐） #

PrimeNG的TieredMenu组件自带了appendTo属性，专门用来解决这类溢出裁剪问题。它可以把子菜单附加到页面的<body>元素上，让子菜单脱离滚动容器的上下文，自然就不会被裁剪了。

修改你的HTML代码，给p-tieredMenu添加该属性：

<div class="app-scroll-perso">
  <p-tieredMenu [model]="items" appendTo="body"></p-tieredMenu>
</div>

同时注意修正原代码里类名不匹配的问题（HTML用scroll-width-perso，CSS用app-scroll-perso，统一为同一个类名）：

.app-scroll-perso {
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 250px;
}

这个方法不需要复杂的CSS修改，是官方设计用来解决这类场景的，兼容性和稳定性都最好。

方案2：通过CSS调整子菜单的定位和层级 #

如果因为某些限制无法使用appendTo，可以通过CSS强制子菜单脱离滚动容器的裁剪范围：

/* 外层滚动容器保持相对定位作为参考 */
.app-scroll-perso {
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 250px;
  position: relative;
}

/* 修改子菜单为固定定位，同时提高层级避免被其他元素遮挡 */
.app-scroll-perso .ui-tiered-menu-submenu {
  position: fixed !important;
  z-index: 9999 !important;
}

不过这个方法需要注意fixed定位可能带来的位置偏移问题，需要根据你的页面布局微调子菜单的位置，不如方案1省心。

方案3：调整滚动容器的裁剪范围 #

另一种思路是让滚动只作用于主菜单的选项列表，而不是整个外层容器：

/* 外层容器不设置滚动，只控制宽度 */
.app-scroll-perso {
  width: 250px;
}

/* 给菜单内部的列表容器设置滚动 */
.app-scroll-perso .ui-tiered-menu-list {
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
}

这个方法的原理是让滚动仅作用于主菜单的选项部分，子菜单依然相对于整个菜单组件定位，不会被滚动容器裁剪。需要确认PrimeNG 8的TieredMenu内部结构包含.ui-tiered-menu-list这个类（通常是存在的）。

你可以先尝试方案1，这是最直接且符合PrimeNG组件设计的解决方式，应该能快速解决你的问题。

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