如何设置iframe可滚动以完整展示所有内嵌内容

你的代码存在3个直接导致iframe无法滚动的问题：

• HTML内联样式中.waitingtime规则缺失闭合大括号，CSS语法错误会导致后续所有样式解析失效：

.waitingtime {
    color: black;
    font-family: filson soft regular,sans-serif;
/* 此处缺少闭合大括号 } */

• 你给#asm3-adoptable-iframe设置的overflow-y: scroll仅作用于iframe标签本身，无法控制跨域加载的内部页面滚动；同时开启asm3_adoptable_iframe_fixed = true配置后，没有给遮罩层添加正确的滚动约束。
• 遮罩层和关闭按钮的定位逻辑错误，关闭按钮重复设置margin属性导致样式覆盖，进一步挤压了iframe的可视区域。

按以下步骤修改代码即可解决滚动问题：

1. 补全CSS语法错误，修正HTML内联的.waitingtime样式：

<style>
.waitingtime {
    color: black;
    font-family: filson soft regular,sans-serif;
} /* 补全闭合大括号 */
</style>

2. 替换原有页面CSS中iframe相关的样式代码，改为以下内容：

#asm3-adoptable-iframe-overlay{
    background-color: rgba(0,0,0,0.57) !important; /* 兼容旧浏览器的rgba写法 */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto !important; /* 给遮罩层添加滚动能力，无需控制iframe内部滚动 */
    z-index: 9999;
}
#asm3-adoptable-iframe{
    width: 479px !important;
    max-width: 90%;
    margin: 80px auto 40px auto; /* 上下预留足够空间，避开关闭按钮 */
    display: block;
    min-height: 90vh;
    height: fit-content !important; /* 不写死高度，适配内容长度 */
    border: none;
    background-color:white;
}
#asm3-adoptable-iframe-close{
    background-color: #c92327;
    color: white;
    padding: 7px 23px;
    position: fixed; /* 固定定位，滚动时关闭按钮始终在视口内 */
    border-radius: 5px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    top:20px;
    z-index: 10000;
    cursor: pointer;
    border: none;
}

3. 在引入sheltermanager服务脚本的标签后面，添加以下JS代码，移除第三方脚本默认给iframe加的禁止滚动属性：

<script>
window.addEventListener('load', function(){
    document.addEventListener('click', function(e){
        if(e.target.closest('.asm3-adoptable-item')){
            setTimeout(function(){
                const iframe = document.getElementById('asm3-adoptable-iframe');
                if(iframe){
                    iframe.removeAttribute('scrolling');
                    iframe.setAttribute('scrolling', 'yes');
                    iframe.style.overflow = 'visible';
                }
            }, 300)
        }
    })
})
</script>

点击动物卡片弹出详情层后，可通过滚动遮罩层查看iframe内的全部动物信息，关闭按钮固定在屏幕顶部不会随页面滚动偏移，同时适配移动端宽度显示。

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