原文链接: 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设备上支持滚动的更多相关文章

  1. 【转】使IFRAME在iOS设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将 ...

  2. [css]解决iframe在ios设备上无法滚动

    原因: safari的webkit内核特性 解决方案: 在iframe外包裹一层div并另外设置其css属性为如下: -webkit-overflow-scrolling:touch; overflo ...

  3. 作IFRAME于iOS您的设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界 ...

  4. 怎样将游戏从Unity导到iOS设备上

    当我开始开发自己的iOS游戏时,我会考虑的第一件事便是如何将其导出到设备中,如此有效地测试我的游戏.最初,该过程看似很长且复杂,我所遇到的主要问题是,尽管存在许多资源,但是它们并非完全来自同样的地方, ...

  5. 不通过App Store,在iOS设备上直接安装应用程序(转)

    今天在iOS设备上安装天翼云存储app,在safari上直接打开http://cloud.189.cn/wap/index.jsp,点击“点击免费安装”,如下图: 神奇的事情发生了,设备上直接下载ap ...

  6. jquery keyup 在IOS设备上输入中文时不触发

    今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...

  7. iOS设备上出现的click,live,on点击失去效果

    iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...

  8. 不通过AppStore,在iOS设备上直接安装应用程序的原理

    本文转载至  http://mobile.51cto.com/hot-439095.htm 通过itms-services协议,可以通过safari浏览器直接在iOS设备上安装应用程序.利用这种方式, ...

  9. 在Windows笔记本上调试运行在iOS设备上的前端应用

    我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...

随机推荐

  1. Android Multimedia框架总结(九)Stagefright框架之数据处理及到OMXCodec过程

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52532085 不知不觉到第九篇了,感觉还有 ...

  2. 20 ViewPager Demo3指示器

    MainActivity.java package com.qf.day20_viewpager_demo3; import java.util.ArrayList; import java.util ...

  3. UNIX网络编程——揭开网络编程常见API的面纱【上】

    Linux网络编程API函数初步剖析 今天我们来分析一下前几篇博文中提到的网络编程中几个核心的API,探究一下当我们调用每个API时,内核中具体做了哪些准备和初始化工作. 1.socket(famil ...

  4. Android图片setBackgroundResource和setImageResource的区别

    网上对于这2个的区别大都是如下所示: setImageResource與xml中的src的屬性才是相匹配的,而setBackgroundResource是與xml中的background屬性相匹配 的 ...

  5. EBS销售(OE)模块常用表

     select * from ra_customers 客户 select * from ra_addresses_all 地址 select * from ra_site_uses_all 用户 ...

  6. Java Socket输入流如何检测到EOF

    对于InputStream的 read(b, off, len) 方法 public int read(byte[] b, int off, int len) throws IOException,J ...

  7. 无刷新更新listview

    闲来无事,写点水文吧!有用得着的可以参考下,无刷新更新listview是什么意思呢?举个例子,在订单类listview列表中,常常会有各种订单状态,拿商城类app来说,会有待付款,待收货,确认收货等等 ...

  8. Android初级教程理论知识(第八章网络编程二)

    HttpClient 发送get请求 创建一个客户端对象 HttpClient client = new DefaultHttpClient(); 创建一个get请求对象 HttpGet hg = n ...

  9. Unity 简易的UI背景昼夜轮替效果

    在UI背景上实现一个简易的有光影照射的昼夜轮替效果,往往比一个死板的UI背景看起来更加形象生动,比较传统的方式是多图轮流替换的序列帧动画,不过要达到整个UI背景大图的所有地方都产生光影效果,那么务必每 ...

  10. Uva - 816 - Abbott's Revenge

    这个迷宫问题还是挺好玩的,多加了一个转向的问题,有些路口不同的进入方式会有不同的转向限制,这个会比较麻烦一点,所以定义结点结构体的时候需要加一个朝向dir.总体来说是一道BFS求最短路的问题.最后打印 ...