无法在移动iOS Safari上滚动iframe

问题描述

即使将溢出设置为滚动，也无法将Google表单iframe置于叠加层中进行滚动，相反，其下方的背景会在移动设备上不断滚动.即使将设备更改为台式机chrome上的移动设备，它也可以在iframe中在台式机chrome/safari上正常滚动.

Even with overflow set to scroll, can't get the google forms iframe in an overlay to scroll, instead the background underneath keeps scrolling on mobile. It scrolls inside the iframe just fine on desktop chrome/safari, even when I change the device to a mobile one on desktop 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;
    }
  }
}

推荐答案

注意位置属性.

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

我将位置设置为绝对"，并且位置已固定.

I set the position to "absolute" and it has fixed it.

*还可以使用这些属性:

*also play with those attributes:

scrolling =否"(或是"，取决于您的需要)

scrolling="no" (or "yes", depends on your need)

溢出:滚动；(或代替滚动"，使用以下之一:visible | hidden | auto | initial | inherit;)

overflow: scroll; (or instead of "scroll", use one of those: visible|hidden|auto|initial|inherit;)

这篇关于无法在移动iOS Safari上滚动iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！