如何在 iOS Safari 上启用 iframe 滚动条

Posted

技术标签:

【中文标题】如何在 iOS Safari 上启用 iframe 滚动条【英文标题】:How to enable iframe scrollbar on iOS safari 【发布时间】:2011-01-20 20:29:43 【问题描述】:

我正在尝试在我的网站上实现 facebook 的直播插件。我看到 pc 和 mac 浏览器上有一个滚动条,但在 iphone 或 ipad safari 上没有。我认为这是因为 iphone 和 ipad 对待滚动条的方式不同,因为它们都是基于触摸的设备。所以我希望用两根手指滚动 iframe,但它也不起作用。

这里是示例页面(使用不同的 src url)http://para.qacode.com/test.php

如何在 ios safari 上启用两指滚动或普通滚动条?

【问题讨论】:

【参考方案1】:

在 iOS 5 之前的版本中,您可以使用两根手指在 iPad/iPhone 上滚动 iframe,但这有点隐藏功能,大多数人都不知道。我不确定为什么拖指滚动不适用于您的 iframe - 也许有一些 javascript 拦截了触摸事件?

在 iOS 5 上,此问题已得到修复,并且对于使用一根手指的 iframe 可以正常滚动。

如果您需要在 iOS 4 和更早版本上滚动页面的子区域,最好的办法是使用 iScroll 之类的库,该库通过 JavaScript 触摸事件处理实现滚动。

【讨论】:

【参考方案2】:

将这些样式应用到父容器:

-webkit-overflow-scrolling:touch;
overflow:auto;

【讨论】:

以上是关于如何在 iOS Safari 上启用 iframe 滚动条的主要内容,如果未能解决你的问题,请参考以下文章

如何在我的网站上启用iOS 5 Safari Reader?

如何在私有模式下在 iOS Safari 浏览器上启用 LocalStorage?

IFRAMEs 和 iPad 上的 Safari,用户如何滚动内容?

safari,IOS下iframe宽高度被内容撑出设备高度

使用 iFrame 表单(iOS Safari)后,iPhone 数字键盘不断弹出

iOS 12 Safari iframe + 位置:固定 + translate3d 错误