900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > iframe滚动条在safari中无法滚动的终极解决方案

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

时间:2022-11-29 22:33:44

相关推荐

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'

}

好了,完美解决~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。