关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法

1 篇文章 0 订阅
1 篇文章 0 订阅

项目中有个需求时在页面的最下面有一排按钮,这排按钮需要固定到页面的最下面,不能随着屏幕的滚动为滚动。


问题:

功能是使用css的position:fixed; bottom:0;属性设置的。

单独一个页面访问,不管在PC上还是移动设备上都可以正常显示。

But,当这个页面被一个iframe嵌入的时候,在ios设备上footer一直处在页面内容的最下面,而不是屏幕的最下面。而PC和android设备上可以正常显示。

原因:iframe嵌入后,ios设备不支持position:fixed;属性。


解决办法:

方案1:.动态计算footer的高度,而且footer的高度时相对iframe计算的,所以footer的高度(top)是 = 屏幕滚动条的高度 + 屏幕的高度 - header的高度 - footer的高度。

当时亲测,在ipad上是不支持window.scroll事件的,没法获取真正的scrollHeight的值。如果添加了touchmove事件,但获取的pageY高度又不准确,时刻在变化,导致footer上下闪动。  【亲测失败,请高人指教!!!】

方案2:设置body的高度为一个固定值,即body{height:600px;overfolw-y:auto;} ,这样footer就能永远停在屏幕的最下面了。但是body体中出现滚动条,需要隐藏起来。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值