iOS iframe可滚动性问题 - 滚动不起作用
问题描述:
滚动不适用于iOS设备,如iPad或iPhone 6.由于某种原因,“body”正在滚动,而iframe仍处于静止状态。iOS 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>
答
这些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%
}
答
通过添加overflow: hidden;
到你的HTML,身体应该解决这个问题。下面是一个例子,我使用width: 90vw;
和height: 80vh;
来获取屏幕宽度和高度,而不是容器。
html,body {
overflow: hidden;
height: 100%;
}
#content {
width: 90vw;
height: 80vh;
overflow: auto;
background: lightblue;
}
#scroll-fake {
width: 50%;
height: 150%;
background: pink;
}
<body>
<div id="content">
<div id="scroll-fake"></div>
</div>
</body>
这对我不起作用 –
编辑增加身高:100%;应该现在工作 –