=============================================2019-3-6 补充========================================
对应ios iframe 中fixed 楼主现在已经 很轻车熟路了 这里 再补充一下 宏观思路
把 iframe嵌入的页面
首先 1.想象成一个 宽高100%的 div 然后 用相对定位 position:relative 做基本的 最底层
2 然后用 position:absolute 宽高100% top:0 left:0 做滚动页 此时 最关键的就是 找到 最里层的 要滚动的div
给一个 overflow:auto 和-webkit-overflow-scrolling:touch 这2个 是为了模拟滚动效果及 恢复成ios的惯性滑动
3 然后就是底部的原来fixed定位的 footer了 这个时候 你就把 footer的style 设置成 position:absolute;left:0;botton:0就可以了
然后 只要 你理解的 我的思路 我保证 没有不可能fixed的 ios iframe嵌套了 放心吧
=============================================2019-3-6=============================================
最近接触了一个活动页面,先说需求
需求:iframe下引用另一个项目的页面(这里咨询了某大神,建议手机端不要再使用iframe了,已经被遗弃了),
这里出现问题1:跨域
然后就是引用的长度肯定会大于你的手机高度,需要滚动。然鹅滚动时在页面的某个位置需要点击一个弹窗。覆盖整个屏幕,然后不随屏幕滚动而动,也就是问题2:iframe下position:fixed失效,
解决方案:
百度许久,1.有说用flex替代fixed的 然而 我做的这个和替代效果不同 所以无法取用
2.有说动态计算滚动高度,然后设置定位,实时改变top值 √。
我采用的就是第二种方案 不过百度介绍基本无效 我需要对我的页面重新滤清结构
大致我们要做到的结构
1.a项目 iframe 的src引入b项目网址
2.b项目 首先1 要注意html页面上是否开头带有
<!DOCTYPE html>
这个很关键 如果不带 则为怪异模式 高度是body的高 如果带了 就是标准的w3c规范 高度显示html 然后是body
我这里带着 这个规范 (主要防止再出连锁问题)
3.body下只留一个div 样式如下 这里切记 先个html,body{height:100%} 否则无高
<div id="b" style="height: 100%;position: relative;overflow: auto;">
overflow就是准备做滚动效果
4.然后 主页面 为第一个div 样式如下 这2个配合 现在页面是会滚动的 不多解释
<div style="position: absolute;top: 0px;left: 0px">
5.然后 弹框 为另一个div 样式如下 当然 默认的样式都在class里 比如display:none 不做展示
<div class="alert-bg1" style="position: absolute;left: 0px;top: 0px;height: 100%;">
6.现在主结构为
div (relative) (id=b)
|-------div (absolute) 主内容
|-------div (absolute) 模态框
7.然后写js
var w = document.getElementById("b");
w.onscroll=function(e)
{
document.querySelector(".alert-bg1").style.top=w.scrollTop+"px"
}
b是总的div 然后监听b的滚动距离 然后赋值给模态框的top
到这 就解决了iphone 不兼容fixed的问题
不过 问题2又来了 当你滑动你的模态框时(因为我的模态框里还有很多内容,也需要滚动),所以会发生页面的抖动,相信你看了很多帖子 抖动已经明白了 那怎么办呢 我在我的项目里利用触摸模态框然后将b的div整体静止 也就是监听touchmove
overflow:hidden即可 然后当我的模态框关闭时 再将overflow:auto 设置回来 即可
静止b
//触摸弹窗 后面不动
$(".alert-bg1").on("touchmove",function (e) {
document.getElementById("b").style.overflow="hidden"
})
启动b
function closeRule() {
$('.alert-bg1').fadeOut()
document.getElementById("b").style.overflow="auto"
}
至此 这个问题就解决了,希望可以帮到别人,其实还是那句,具体情况,具体分析 感谢