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'
}

好了，完美解决~

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

html popstate 不触发,javascript – 为什么在加载iframe时在Safari中没有触发popstate？...
在Safari中,如果存在iframe加载,并且用户通过返回或转发更改历史记录状态,则不会触发popstate事件,从而导致应用程序状态和窗口位置不同步. 我认为一个活跃的XHR请求会导致相同的行为, ...
idea中鼠标滚动失效的解决方案：
解决iframe在ios中无法滚动的bug
https://fly.layui.com/jie/32020/(无效) 修改方法: 1.在嵌入进iframe的每个页面的<body>里面加个id,如<body id="i ...
iframe在ipad safari的显示
今天要在web中嵌套一个网址或本地HTML,用到了iframe,在电脑上设置scrolling='auto',宽度高度,会有滚动条出现.而在 ipad上会全部显示整个网页的宽度高度.scrollin ...
【转】使IFRAME在iOS设备上支持滚动
原文链接:Scroll IFRAMEs on iOS 原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员:铁锚很长时间以来, iOS设备上Safari中超出边界的元素 ...
使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS 原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的 ...
html frame滚动条,如何修改 iframe 滚动条样式
项目中用到了 iframe,由于显示效果,想要修改一下滚动条样式,通过修改 css 样式在 chrome 下无效,而在 safari 中显示正常,不知道什么原因,求大佬们指点写了个测试代码: ind ...
html页面下拉条位置,iframe滚动条位置控制
javascript中如可控制iframe的滚动条位置我做了一个聊天室,嵌套了两个iframe,一个name叫mainframe,用来显示聊滚动条始终在最下端: window.οnlοad=func ...
ios上iFrame滚动条失效
在做公户号的时候,有一个页面引入了IFrame.然后出现了一个很尴尬的问题,iframe不出现滚动条,而且在屏幕高度以外的内容都被截掉了. 百度之后,找到了解决方案,亲测可行~ 要点只要两个:1.将i ...

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

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

最新文章

热门文章