使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 )

支持滚动的 iframe 页面效果

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属性是设置在包装元素上,而不是设置到滚动元素自身上面的!

使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 ...
ios滚动条影响父页面 vue_在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrollin ...
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 ...

使IFRAME在iOS设备上支持滚动

使IFRAME在iOS设备上支持滚动相关推荐

最新文章

热门文章