无法在移动设备上滚动 iframe iOS Safari

Question

即使将溢出设置为滚动，也无法让覆盖层中的 google 表单 iframe 滚动，而是下面的背景在移动设备上一直滚动。它在桌面 chrome/safari 上的 iframe 内滚动得很好，即使我将设备更改为桌面上的移动设备 chrome。

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;
    }
  }
}

Answer 1

注意位置属性。

<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>

我把位置设置为"absolute"，它已经修复了。

*也可以使用这些属性：

滚动="no"（或"yes"，取决于您的需要）

溢出：滚动；（或者代替 "scroll"，使用其中之一：visible|hidden|auto|initial|inherit;）

Answer 2

如果其他答案对您不起作用（因为它们对我不起作用），请查看此代码：

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe>Loading...</iframe>
</div>

无法在移动设备上滚动 iframe iOS Safari

Can't scroll iframe on mobile iOS Safari

html

css

iframe

mobile-safari

google-forms