【转】使IFRAME在iOS设备上支持滚动
原文链接:Scroll IFRAMEs on iOS
原文日期: 2014年07月02日
翻译日期: 2014年07月10日
翻译人员:铁锚
很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略. 通过一些研究发现,只要设置两个CSS属性,以及加上一个元素,这个问题就解决了. Here we go!
(译者注: 当初自己调这个问题是通过JS来监听处理的,导致的问题是响应不太灵敏,而且需要处理各种浏览器兼容问题.)
点击查看示例程序(你可以用iPhone打开试试, 地址是: http://davidwalsh.name/demo/scroll-iframes-ios.php )
HTML代码
在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:
- <div class="scroll-wrapper">
- <iframe src=""></iframe>
- </div>
这个DIV将作为支持内部滚动的基础容器。
CSS 代码
要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):
- .scroll-wrapper {
- -webkit-overflow-scrolling: touch;
- overflow-y: scroll;
- /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
- }
- .scroll-wrapper iframe {
- /* 你自己指定的样式 */
- }
-webkit-overflow-scrolling: touch;属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:
- .demo-iframe-holder {
- position: fixed;
- right: 0;
- bottom: 0;
- left: 0;
- top: 0;
- -webkit-overflow-scrolling: touch;
- overflow-y: scroll;
- }
- .demo-iframe-holder iframe {
- height: 100%;
- width: 100%;
- }
请收藏本文,以备查询或使用.记得有这个CSS属性是设置在包装元素上,而不是设置到滚动元素自身上面的!
转载于:https://www.cnblogs.com/dhsx/p/4801036.html
【转】使IFRAME在iOS设备上支持滚动相关推荐
- 使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS 原文日期: 2014年07月02日 翻译日期: 2014年07月10日 翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的 ...
- ios连不上微软游戏服务器,iOS 设备上已经支持微软的 Xbox 云游戏服务
继 4 月中旬开始的仅限邀请的 Beta 测试之后,微软已向iOS 和 PC 上的所有Game Pass Ultimate订阅者推出其 Xbox 云游戏服务.随着今天的公测开始,您可以访问xCloud ...
- html2canvas在手机不行,html2canvas - 在iOS设备上崩溃
我为客户端建立了一个系统,它允许您选择或上传汽车图像,在中键入数字,然后移动/调整大小/旋转/将板倾斜到正确的位置,然后下载图像:html2canvas - 在iOS设备上崩溃 这都是每次我在测试设备 ...
- 在Android和iOS设备上调用C++代码
不少Android和iOS项目中,因为种种原因不得不调用C/C++代码.这篇文章主要讲述如何通过Objective-C++.NDK技术在iOS及Android设备上调用C/C++代码. 主要工作原理 ...
- 在iOS设备上安装Windows、Linux等操作系统!
提到iOS高级玩法,很多人都会想到越狱,但真正的高级玩家,已经在探索如何在iOS上运行其他操作系统了. 2020年,这个想法真的实现了. 首先是在今年3月5日,一位国外的开发团队称,他们在苹果iPho ...
- ios avi_转换DVD,ISO和AVI视频以在iOS设备上播放
ios avi If you own an iOS device, you know that by default it only plays certain video formats. You ...
- 解决 .webp 格式图片在 ios 设备上无法正常显示的问题
解决.webp 格式图片在 ios 设备上无法正常显示的问题 使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名 // 定义请求商品详情数据的方法 async ge ...
- 使用 Xcode 在越狱 iOS 设备上进行开发调试
1 目的 2 iOS 设备的设置 3 生成私有签名 4 设置 Xcode 4.1 告诉 Xcode 不需要签名 4.2 告诉 Xcode 不用做签发动作 4.3 指示 Xcode 使用私有签名签发 A ...
- “SandJacking”攻击:在未越狱的 iOS 设备上安装恶意应用
在HITB 2016 会议中,Mi3 Security公司的安全研究员Chilik Tamir发表了一个关于"SandJacking"攻击的演讲,利用一个未打补丁的iOS漏洞在未越 ...
最新文章
- pandas使用pad函数向dataframe特定数据列的每个字符串添加补齐字符或者字符串、向所有字符串的左右两侧填充、直到宽度达到指定要求(both padding)
- 移动广告聚合管理-KeyMob|移动广告聚合平台|
- MapReduce的优化
- SCUT个人整理的常见问题
- liblbfgs简介
- 搞定 Go 语言,不会这些可不行
- Python 生成器 迭代器
- java 二叉树特点_二叉树的Java实现及特点总结
- 广电总局:坚决抵制含有暴力血腥等不良情节动画片上网播出
- 内容为王时代“内卷”急,安全风控一旦疏漏很要命!
- IOS之xib计算cell的高度
- UE4中Steam成就纯蓝图的实现
- PHP架构师必备技术视频合集
- 德莱联盟[判断线段相交]
- 地图配色及网络地图比较
- The Fed's Market Footprint
- Java实现简单的KFC点餐系统(未实现可视化)
- 中学计算机竞赛教程,全国中小学信息技术课程教学大赛获奖案例初中信息技术八年级-设置自定义动画动作路径...
- CANopen3.0-数据格式
- ISACA:COBIT5风险专业指南发布