Chrome Android 上的多个 iframe 滚动

Question

在工作中，我们有一个系统可以改变该系统的某些方面。我们正在尝试向网站添加模式框（其中 3 个）。它在基于 Windows 的浏览器上运行良好。在移动设备上它无法正常工作。我们在 iframe 中添加了一个滚动条元素（我们使用它，因为我们在系统上有字符限制），它在第一次加载的 iframe 时在触摸时滚动，但在其他 2 上，滚动只使用滚动条而不是触摸。

我知道使用 iframe 并不理想，但是由于字符限制，我们无法在不支付系统开发人员更改限制的情况下将 Web 内容添加到模态，当然还要等待他们完成整个过程。

有人对如何解决这个问题有建议吗？

HTML：

<a href="#privacy">Privacy Policy</a>&nbsp;<a href="#cookie">Cookie Policy</a>
<div id="privacy" class="modalDialog">
<div><a href="#close" title="Close" class="close">X</a><iframe src="policies/fpn.html" frameBorder="0" scrolling="yes"></iframe></div>
</div>
<div id="cookie" class="modalDialog">
<div><a href="#close" title="Close" class="close">X</a><iframe src="policies/cookie.html" frameBorder="0" scrolling="yes"></iframe></div>
</div>

CSS：

.modalDialog iframe  { width: 100%;
height: 100%;}

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    pointer-events: none;
    -webkit-overflow-scrolling: auto;       

}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
-webkit-overflow-scrolling: auto; 
}

.modalDialog > div {
    width: 80%;
    height: 600px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;  
-webkit-overflow-scrolling: auto;
    overflow: auto;
    overscroll-behavior: contain;         

}
::-webkit-scrollbar {
            -webkit-appearance: none;
            width: 20px;
}
::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: rgba(0,0,0,.5);
            box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 5px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

Answer 1

在我寻找修复不同问题时找到了解决方案。

通过将display:block; 添加到目标子类并将display:none; 添加到父类，它已经解决了这个问题。