iframe滚动条在safari中无法滚动的终极解决方案

大家都知道,正常情况下iframe嵌套的页面如果高度超过iframe高度,那么就正常出现滚动条,并且此滚动条是iframe自身的滚动条。

但在ios,safari浏览器下这一切都失效了,或许你百度,研究了一晚上也百思不得其解,因为大部分情况下你无法进行真机调试,那么你看到我的文章,将带你解决这一困扰。言归正传:

<iframe src='xxx'></iframe>

在safari的Webkit引擎下,iframe的高度会随着嵌套页面内容的增大而增大,故失去了滚动条,此时我们会想到js改变iframe的高度,那么在webkit下还是行不通的,因为webkit下滚动条失去了自行滚动的功能,当然scrolling='yes’开放父元素的滚动权,故在iframe包一层div:
<div style='overflow:auto;-webkit-overflow-scrolling:touch;'>
      <iframe scrolling='yes'></iframe>
</div>

此时div的滚动条仍然失效,因为iframe被增大的同时,div也被增大,所以当页面加载完动态设置div高度让滚动条出现,所以完整代码如下:
<div style='overflow:auto;-webkit-overflow-scrolling:touch;'>
      <iframe scrolling='yes'></iframe>
</div>

window.onload = function(){
      document.getElementTagName('div').scrollHeight = '500px'
}

好了,完美解决~

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值