Lightning组件模态框加载银行结账页面双滚动条问题求助

开发Lightning组件时，需在模态弹窗中展示银行结账页面，当前出现双滚动条（弹窗主体与外部页面各一个）。已尝试以下CSS样式，但外部页面仍无法适配弹窗主体区域，需求为仅弹窗主体内显示滚动条：

.THIS .slds-modal__header {
    border-bottom:3px solid #FFA000;
    height: 10vh;
    margin: 0;
    padding: 0;
}

.THIS .slds-modal__content {
    overflow-y: auto;
}

.THIS .slds-modal__body {
    height: 80vh;
}

.THIS .slds-modal__footer {
    border-top:3px solid #FFA000;
    height: 10vh;
    margin: 0;
    padding: 10px;
}

核心思路是禁用外部页面的滚动行为，同时让弹窗主体成为唯一的滚动容器：

1. 针对iframe嵌入场景（最常见） #

假设银行结账页面通过<iframe>嵌入，调整样式如下：

/* 保留原有头部和底部样式 */
.THIS .slds-modal__header {
    border-bottom:3px solid #FFA000;
    height: 10vh;
    margin: 0;
    padding: 0;
}

.THIS .slds-modal__footer {
    border-top:3px solid #FFA000;
    height: 10vh;
    margin: 0;
    padding: 10px;
}

/* 关键调整：锁定弹窗内容区的溢出行为 */
.THIS .slds-modal__content {
    overflow: hidden; /* 取消内容区的滚动能力 */
}

/* 让弹窗主体成为唯一滚动容器 */
.THIS .slds-modal__body {
    height: 80vh;
    overflow-y: auto; /* 仅主体区域显示垂直滚动条 */
    padding: 0; /* 移除内边距避免外部页面被挤压 */
}

/* 强制iframe完全适配容器，禁用自身滚动 */
.THIS .slds-modal__body iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}

2. 针对非iframe嵌入场景 #

如果外部页面通过组件直接引入，给嵌入的外部内容容器添加强制适配样式：

.THIS .slds-modal__body > * {
    height: 100%;
    overflow: hidden; /* 禁用外部内容的滚动 */
}

补充说明 #

• 若外部页面本身自带固定高度或overflow: scroll样式，上述代码会强制覆盖该行为；
• 可根据实际布局需求，将height: 80vh改为固定像素值（如600px），避免视窗高度变化导致的布局异常。

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