无法在移动iOS上滚动iframe Safari

问题描述：

即使将溢出设置为滚动，也无法获得覆盖范围内的Google表单iframe滚动，而是在底部的背景继续滚动移动。它可以在桌面Chrome浏览器或Safari浏览器中很好地滚动iframe，即使我在桌面Chrome上将设备更改为移动设备。无法在移动iOS上滚动iframe Safari

HTML：

 <div class="modal fade" id="follow-modal" tabindex="-1" role="dialog" aria-labelledby="follow-modal"> 
     <div class="modal-background"></div> 
     <div class="modal-wrapper"> 
     <div class="survey-wrapper"> 
      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScYLpClPexPWtT9UETnksKMKnzH5xRgs-UikH21Ktl6PhJQ-w/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe> 
     </div> 
     </div> 
    </div>

SCSS：

#follow-modal { 
    .modal-background { 
    background-color: rgba(0,0,0,.9); 
    } 
    .modal-wrapper { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    } 
    .survey-wrapper { 
    position: relative; 
    background-color: transparent; 
    text-align: center; 
    margin-top: 100px; 
    width: 700px; 
    -webkit-overflow-scrolling: touch; 
    overflow-y: scroll; 
    @media (max-width: $screen-md-min) { 
     margin-left: 10px; 
     margin-right: 10px; 
    } 
    iframe { 
     width: 100%; 
     height: 600px; 
    } 
    } 
    h3 { 
    margin-bottom: 15px; 
    } 
    button.close { 
    color: white; 
    position: absolute; 
    top: -60px; 
    right: -50px; 
    opacity: 1; 
    @media (max-width: $screen-md-min) { 
     right: -20px; 
    } 
    &:hover { 
     color: white; 
    } 
    } 
}

答

小心位置属性的。

<iframe src="www.website.com/" style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> 
Your browser doesn't support iframes 
</iframe>

我将位置设置为“绝对”，并已修复它。

*也与这些属性发挥：

SCROLLING = “NO”（或 “是”，取决于你的需要）

溢出：滚动; （或者代替“滚动”，使用其中的一个：visible | hidden | auto | initial | inherit;）

无法在移动iOS上滚动iframe Safari

相关推荐