如何为p-overlayPanel添加滚动条 适配内部大尺寸p-table表格

你现在的代码高度撑满屏幕是配置问题：

• 给p-overlayPanel设了overflow: visible，这个属性会让容器完全被内部内容撑开，不会做任何滚动裁剪
• 没给容器加最大高度限制，表格数据多了自然一路撑到占满全屏

二选一即可，优先推荐第二种交互更好的方案：

方案1：直接给OverlayPanel加滚动限制 #

修改p-overlayPanel的[style]配置，替换overflow值、新增最大高度限制即可：

<!-- 仅修改p-overlayPanel标签的style配置，其余代码保持不变 -->
<p-overlayPanel #op [showCloseIcon]="false" [style]="{'overflow':'auto', 'max-height.px': 420, 'padding': 0 ,'border':'none'}">

max-height的数值可以根据你的页面布局需求自行调整，设置为overflow:auto后，内容高度超出限制时会自动显示纵向滚动条，内容不足时滚动条自动隐藏。

方案2：用p-table内置滚动（表头固定，体验更优） #

如果需要滚动时表格表头始终固定在顶部，不需要给OverlayPanel加滚动，直接开启p-table自带的滚动能力即可：

<!-- 给p-table添加scrollable和scrollHeight配置，其余代码保持不变 -->
<p-table [columns]="cols" [value]="data" [scrollable]="true" scrollHeight="420px">

这种方案的滚动区域仅在表格正文部分，表头不会跟着滚动，用户浏览长列表时不需要反复回滚看列名，交互体验更好。

不要保留overflow: visible配置，该属性会让所有高度限制规则失效，容器永远会被内部内容撑开。

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