js safari解决iframe中fixed失效的问题
2018-11-06 本文已影响548人
world_7735
那个原因是因为safari嵌入iframe导致不支持position:fixed;这个属性；
解决方案：简单的也是最直接的（不用fixed）即把在所有内容外加个div标签设置高度，样式overflow：auto；需要（fixed）的标签用absolute设置指定的高度放在底部或者其他位置；这样就简单的解决了问题，希望对你有所帮助。
需要注意的是引用iframe的时候所有iframe外面加上scroll_wrapper标签为了解决ios引用iframe的时候不滚动情况样式如下：
.scroll_wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
下面是简单的案例：
1.html
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>
选择受益人/机构
</title>
<style>
.scroll_box{
padding-bottom: 50px;
box-sizing: border-box;
height: 100vh;
overflow-y: auto;
-webkit-box-sizing: border-box;
}
.fenfa_foot{
width: 100%;
position: absolute;
bottom: 0;
border-top: 1px solid #e7e7e7;
background: #3773aa;
font-size: 12px;
z-index: 1001;
text-align: center;
}
</style>
</head>
<body>
<div class="scroll_box">
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
<h3 class="">当前分配资产</h3>
</div>
<ul class="fenfa_foot">
<li>
<a href="javascript:;" id="percentage">按比例分</a>
</li>
<li>
<a href="javascript:;" id="next">按数额分</a>
</li>
</ul>
</body>
</html>
2.html
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>
账户管家
</title>
<style>
.scroll_wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll_wrapper">
<iframe src="./1.html" style="width:100%;height:100vh" name="a_frame" noresize="noresize" frameborder="0"></iframe>
</div>
</body>
</html>
