解决safari中iframe嵌入不能滚动的问题
做完了个webapp之后,开发的时候一直在浏览器上模拟ios,没有任何问题,谁知交差的时候,客户告知在ios浏览器中不能滚动嵌入的iframe,直接就滚动外层整个document了,你知道document本身就有触碰边缘缓动的效果,下图,中间的部分其实就是嵌入了iframe。
解决方法:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
}
.scroll-wrapper iframe {
/* 你自己指定的样式 */
}
解决safari中iframe嵌入不能滚动的问题的更多相关文章
- ios中iframe的scroll滚动事件替代方法
在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...
- 微信端支付宝支付,iframe改造,解决微信中无法使用支付宝付款和弹出“长按地址在浏览器中打开”
微信对支付宝的链接屏蔽了, https://mapi.alipay.com/gateway.do?_input_charset=utf-8¬ify_url=http%3A%2F%2Fzh ...
- easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- 解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)
前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...
- easyui 中iframe嵌套页面,提示弹窗遮罩的解决方法,parent.$.messager.alert和parent.$.messager.confirm
项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document ...
- 解决boostrap中,iframe渲染下,苹果手机横向无法显示剩余内容问题
描述: 问题解决了,采用的手势拖动显示剩余内容,并不是有了横向滚动条 在head标签中加入 <head> <meta charset="utf-8"> &l ...
- IE浏览器中IFrame被加载两次问题的解决-sunziren
本文为作者sunziren原创,首发博客园,转载请注明出处. 昨天遇到了一个问题,先上代码. var content = '<iframe src="www.baidu.com&quo ...
随机推荐
- Codevs 2080 特殊的质数肋骨
题目描述 Description 农民约翰的母牛总是产生最好的肋骨. 你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋 ...
- kvm虚拟机最佳实践系列3-kvm克隆和静态迁移
KVM克隆和KVM静态迁移 KVM克隆 上一章我们已经有了一个合用的虚拟机镜像,现在我们需要用这个KVM镜像大量的创建和部署 virt-clone就是做这个用的.它简化了我们克隆KVM的步骤. 首先停 ...
- python delete数据
#!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/11/24 0:27 # @Author : lijunjiang # @Fil ...
- android 效果
1.TextView 有边界的水波效果: android:background="?android:attr/selectableItemBackground" 无边界的水波效果: ...
- Python_Tips[4] -> and 和 or 的计算原则
and和or / and & or 对于and和or,可以连接多个值,其分别遵循原则: 全是 And: 返回第一个遇到的无效值,若全有效,返回最后一个有效值 全是 Or: 返回第一个遇到的有效 ...
- Python的程序结构[1] -> 方法/Method[0] -> 类实例方法、私有方法和抽象方法
类实例方法.私有方法和抽象方法 Python中最常用的就是类实例方法,类似于属性中的类实例属性,同时,也存在与私有属性类似方法,即私有方法,下面介绍这两种常见的方法,以及一种特殊意义的类实例方法 -- ...
- #423 Div2 C
#423 Div2 C 题意 给出 n 个字符串以及他们在 S 串中出现的位置,求字典序最小的 S 串.保证给出的字符串不会冲突. 分析 模拟就好.用并查集思想优化,数组 nxt[i] 表示从 i 开 ...
- PHP安全相关的配置
PHP作为一门强大的脚本语言被越来越多的web应用程序采用,不规范的PHP安全配置可能会带来敏感信息泄漏.SQL注射.远程包含等问题,规范的安全配置可保障最基本的安全环境.下面我们分析几个会引发安全问 ...
- SQL SERVER 补丁查看
SELECT @@VERSION as 版本情况 SELECT SERVERPROPERTY('ProductVersion') as 产品版本编号, SERVERPROPERTY('Produc ...
- sqlite db-journal文件产生原因及说明
今天在Android中将sqlite的数据库文件生成在SD卡上的过程中,发现生成的.db文件的旁边 生成了一个大小为0的与数据库文件同名的.db-journal文件,不明白此文件的用途,于是 goog ...