IOS上iframe的滚动条失效的解决办法
2016-09-06 09:34
866 查看
问题描述:
iframe设置了高度(例如500px)。倘若iframe的内容足够长超出了iframe设定的高度时,在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示。
问题重现:
结构:
index.html :
<style> #iframe{height:500px;} </style> <div id="content"> <iframe frameborder="0" src="iframe.html" id="iframe"></iframe> </div>
iframe.html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>IOS frame 滚动条 demo</title> </head> <body><div class="container"> 我是一堆很长。很长,很高,很高的内容。 </div> <script src="../jquery.js"></script> </body> </html>
问题原因:
在IOS设备中,iframe内部的html的滚动条无法生效。
--------------------------------------------------------------------------------
解决办法:
把iframe中body里的内容全部包裹一层,然后设置包裹这一层的height,使用属性-webkit-overflow-scrolling:touch;overflow:auto;
代码如下:
iframe.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>IOS frame 滚动条 demo</title> </head> <body> <style> #wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;} </style> <div class="container"> 我是一堆很长。很长,很高,很高的内容。 </div> <script src="../jquery.js"></script> <script> var UA = navigator.userAgent; var forIOS = function(){ if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;} if($('#wrapper').length){return;} $('body').children().not('script').wrapAll('<div id="wrapper"></div>'); }(); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- IOS上iframe的滚动条失效的解决办法
- IOS上iframe的滚动条失效的解决办法。
- 关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法
- 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题,iossafari5.0
- 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
- JS各种iframe弹出控件没有滚动条或者失灵的解决办法
- ie6下iframe出现水平滚动条的解决办法
- iOS 颜色插件失效的解决办法
- ios微信浏览器-div设置滚动-不出现滚动条的解决办法
- 关于 iframe 下 session 失效解决办法记录
- iOS Safari 中click点击事件失效的解决办法
- React.js在ios设备上onClick事件失效的解决办法
- iframe跨域与session失效问题的解决办法
- iOS 的唯一标识失效以及解决办法
- session失效刷新后登录页面嵌入在iframe中的解决办法
- ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法
- iframe里的页面在ie6里出现滚动条的解决办法
- iOS开发-Xcode升级后插件失效解决办法
- IOS的Safari浏览器中,点击事件失效的原理及解决办法
- session失效刷新后登录页面嵌入在iframe中的前台解决办法