我正在使用 Fullpage.js 创建一个包含部分的全页网站。我通过全屏 iframe 在不同的域上使用不同的语言。
虽然我无法在 IOS 移动设备上滚动页面。
当使用以下解决方案时,页面根本无法滚动:
<iframe src="http://url.com/" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">
当我使用这个版本时,我可以滚动一会儿然后它就会出错:
<style>
.demo-iframe-holder {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="demo-iframe-holder">
<iframe src="http://url.com/">
</div>
有没有人可以解决这个问题?
Iframe 中的网站位于此处:http://tinyurl.com/j9heupj
Best Answer-推荐答案 strong>
使用以下代码解决:
<style>
iframe {
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
}
div {
height: 100%;
width: 100%;
position: fixed;
}
body {
margin:0;
}
@media (max-width: 780px) {
div {
position:absolute;
}
}
</style>
<body>
<div>
<iframe src="http://www.website.com/">
</div>
</body>
关于html - iframe 中的 Fullpage.js 无法在 IOS 移动设备上滚动,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/34292238/
|