Question

滚动功能无法在iPad或iPhone 6等iOS设备上运行。出于某种原因＆＃39; body＆＃39;正在滚动而iframe仍处于静止状态。

的Javascript

$(document).on(clickHandler, '#content a', function(){
 href = $(this).attr("title");
 $("#iframeContainer div").append(
  $("<iframe />")
  .attr("src", href)
 )
 $("#iframeContainer").fadeIn();
});

CSS

#iframeContainer {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 background-color: rgba(0,0,0,0.5);
}

#iframeContainer div {
 position: fixed;
 left: 5%;
 top: 5%;
 width: 90%;
 height: 90%;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch
}

#iframeContainer div iframe {
 width: 100%;
 height: 100%
}

HTML

<div id="iframeContainer">
 <div></div>
</div>

Answer 1

通过将overflow: hidden;添加到您的HTML身体，它应该解决问题。这是一个例子，我使用width: 90vw;和height: 80vh;来获取屏幕宽度和高度而不是容器。

＆＃13;

html,body {
  overflow: hidden;
  height: 100%;
}

#content {
  width: 90vw;
  height: 80vh;
  overflow: auto;
  background: lightblue;
}

#scroll-fake {
  width: 50%;
  height: 150%;
  background: pink;
}

＆＃13;

<body>
  <div id="content">
    <div id="scroll-fake"></div>
  </div>
</body>

＆＃13;

Answer 2

这些CSS选项有效。

#iframeContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.closeIframe {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    line-height: 50px;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.9)
}

.closeIframe span {
    font-size: 22px;
    color: #ffffff;
    cursor: pointer
}

#iframeContainer .innerContainer {
    position: fixed;
    top: 50px;
    left: 0;
    padding-bottom: 50px;
    width: 100%;
    height: 100%;
    background: url('../images/loading.svg') center center no-repeat #ffffff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

#iframeContainer .innerContainer iframe {
    border: none;
    width: 100%;
    height: 100%
}

iOS iframe可滚动性问题 - 滚动无法正常工作

2 个答案: