解决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 {
    /* 你自己指定的样式 */
}

  

时间: 2024-11-12 04:19:42

解决safari中iframe嵌入不能滚动的问题的相关文章

ios中iframe的scroll滚动事件替代方法

在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE html> <html> <head> <title>贷款合同</title> <% include ../include/header.html %> </head> <body style="background:

解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)

前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站B(网站B的域名与网站A的域名不同)的资源,这时这个网站B就被认为是第三方.需要注意的是,这儿区分不同网站的标准是域名是否相同,而不是这两个网站是否由同一个公司运营.比如,taobao.com和tmall.com被认为是两

解决Android中,禁止ScrollView内的控件改变之后自动滚动

问题: 最近在写一个程序界面,有一个scrollVIew,其中有一段内容是需要在线加载的. 当内容加载完成后,ScrollView中内容的长度会发生改变,这时ScrollView会自动下滚,如下图所示: 滚动的那一下体验特别不好,所以要防止这种情况.即不论Scrollview中内容如何,都要保持在最上. 解决办法: 先简单写一下我的xml文件的结构: [html] view plaincopy <ScrollView android:id="@+id/scrollView1" a

[转]iOS Safari 中click点击事件失效的解决办法

iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 

iOS Safari 中click点击事件失效的解决办法

问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 <a> 或者 button 等可点击的?元素 ?将 cl

html页面中iframe导致JavaScript失效

<body onload="reset()"> <div id="part1"> some thing here .... <div> <ifame src="xxxx"/> <script> function reset(){ var height = window.innerHeight; document.getElementById("part1").styl

【Android】解决Android的ListView控件滚动时背景变黑

[转载]解决Android的ListView控件滚动时背景变黑 如果大家在非黑色背景下使用ListView控件时,Android默认可能在滚动ListView时这个列表控件的背景突然变成黑色.这样可能导致程序的黑色的背景和主程序的主题既不协调.解决的方法Google在设计Android时也考虑了,在Layout的ListView中加入android:cacheColorHint="#00000000" 的属性即可. 如: <?xml version="1.0"

iPhone safari中Document事件不触发的解决方案 [冒泡]

写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){   //隐藏代码  }); 各大浏览器都没问题,唯独iPhone上的不会触发事件. 后来排查了一遍原因发现,Safari中是这样处理事件冒泡的: 1.点击某个DIV或其他元素. 2.发现没有处理该事件,继续往上冒泡. 3.直到冒泡到body下面的子节点为止,还是没有人处理该事件的话,就把该事件丢弃掉.不再往上冒泡. 4.只要在这一条冒泡链当中,有一个节点处理了该事件,它就不会丢

解决SQLite中的 database is locked

前些时候,同事在站点服务端使用SQlite存储一些临时数据,但是在多人并发的时候Sqlite会抛出异常:The database file is locked , database is locked,而且这个是在客户生产环境下提示出来的,开发环境很难重现,同事实在没辙,竟然想发动所有研发同事通过操作软件重现问题,我只能呵呵了.既然是Sqlite的原因,直接写个小程序测试下sqlite不就行了,而且就算重现了,难不成要改Sqlite源码... Sqlite的特点: 简单(simple):SQLi