Angular自定义模态框overflow-y滚动条可见但无法滚动如何解决

问题根因 #

你遇到的滚动条显示但无法滚动的问题，核心是以下几个常见原因：

1. 自定义cel-dialog组件默认样式拦截了滚动行为
2. 百分比高度计算异常导致.modal-body实际高度和内容高度一致，没有真正溢出
3. 父元素滚动事件被默认阻止，内部滚动触发时被拦截

解决方案 #

方案1：直接覆盖样式修复（快速生效）

修改你的CSS代码如下：

/* 新增cel-dialog的样式覆盖，避免组件默认样式干扰 */
.modal-dialog {
    width: 600px;
    height: 250px;
    position: fixed;
    margin: 10% auto;
    left: 0;
    right: 0;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    background: var(--white);
    /* 新增以下两行 */
    overflow: hidden !important;
    touch-action: auto !important;
}

/* 调整modal-body的高度和交互属性 */
.modal-body {
    height: 175px; /* 替代原有70%的高度，250px总高减去50px头、25px脚正好175px */
    overflow-y: auto;
    position: relative;
    z-index: 1; /* 确保不会被透明上层元素挡住交互 */
}

方案2：改用flex布局（兼容性更好，后续高度修改更灵活）

把模态框容器改成flex垂直布局，自动分配各区域高度，避免百分比计算误差：

.modal-container {
    min-height: 0;
    height: 250px;
    width: 100%;
    /* 新增flex布局配置 */
    display: flex;
    flex-direction: column;
}

.modal-header {
    /* 去掉原有height:20%，改成固定高度+不收缩 */
    flex-shrink: 0;
    height: 50px;
    background-color: var(--blueDark);
    color: white;
}

.modal-body {
    /* 去掉原有height:70%，自动占满剩余空间 */
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    /* 去掉原有height:10%，改成固定高度+不收缩 */
    flex-shrink: 0;
    height: 25px;
    background-color: black;
}

额外排查项 #

如果以上方案都无效，检查你是否在backdrop或者cel-dialog上绑定了wheel、touchmove等滚动相关事件，并且调用了preventDefault()，如果有，修改事件逻辑：仅当事件触发对象是蒙层本身时才阻止默认行为，不要拦截模态框内部的滚动事件。

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