[html5][mui] 关于iOS下的iframe滚动条在手机端无法拖动的问题。(安卓下正常)
            在开发项目中遇到了一个问题:在iPhone手机下,iFrame无法正常拖动,拖动的其实是父页面的body,安卓下没有这个问题。
            然后经过查找问题,得知了解决方案是在iFrame外部套一个div,然后在CSS中为其添加 {-webkit-overflow-scrolling:touch;overflow:auto;}。
            由于我使用的是mui框架,发现iframe直接已经被包裹在<div class=''mui-iframe-wrapper"></div>中,因此直接在框架中添加了该属性。
            但是,仍然没有效果,因此来此询问一下。请问有没有解决办法。
            谢谢各位了。
0

2个回答

0

这段CSS代码是有效果的,主要需要检查一下你加的div是否正确,及样式的优先级是否正确。
http://iskeys.com/article/42
可以看看这里面的

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
解决ios下html5的ifream页面无法滑动的问题
html5移动开发有时会用到ifream镶嵌页面,如下图:             但是测试发现,页面在android下显示很正常,但是ios下页面无法滑动    解决方案:              给ifream加上一个父控件,并且设置滚动
移动端H5嵌入iframe滚动问题
背景 (1) 实现功能 如图,悬浮窗中为iframe,如果超出容器大小实现滚动。 (2) 问题 在iOS上,悬浮窗中的内容如果不是iFrame是可以滚动的,但换成iframe后就无法在其中滚动。 解决方案 (1) 思路 问题在于overflow: auto或者overflow: scroll没有生效。 需要在容器上加上: height: 57vh; overf...
解决MUI在安卓手机上无法滚动的问题
这个问题,只在安卓手机存在,苹果手机是可以滚动的。 一、解决方案 原先的布局:   &amp;lt;!-- 中间区域 --&amp;gt; &amp;lt;div class=&quot;mui-content&quot; id=&quot;main&quot;&amp;gt; &amp;lt;!-- 轮播图 --&amp;gt; &amp;lt;!-- BANNER --&amp;gt; &amp;lt;section class=&quot;swiper-container&qu
ios端 尝试解决 iframe层无法滚动,及iframe宽度变宽的问题
最近在项目中,使用iframe层展示商品详情。于是将网页嵌在了iframe标签里面,在PC测试没有问题,自适应良好,但是转入IOS 真机中,iframe 却不能很好地适应屏幕大小,总是超出屏幕尺寸,也无法上下左右滚动查看完整页面。1、iframe无法滚动:(使用一个div将iframe包含起来,给该div设置一下class).scroll-wrapper { -webkit-ove...
iframe在移动端的限制及其应对策略
iframe使用于移动端其实不少,只是可见的iframe很少。以往我都是用iframe来实现无刷新登录和跨域通信,用来显示内容的地方就是登录那一块。而对于登录来说,登录界面无非,3-4个输入框和1~2个按钮,手机一屏内完全可以显示,所以其实对iframe显示多内容的问题没有过多研究,只知道有以下特性:1.android 2.3的原生浏览器下iframe不仅不可以被控制高度,它同时不会被它外围的di...
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
解决 iframe 在 iPad和iPhone 上不能滚动的问题
解决 iframe 在 iPad 上不能滚动的问题今天要在web中嵌套一个网址或本地HTML,用到了iframe,在电脑上设置scrolling=‘auto’,宽度高度,会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。 但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的...
ios上iframe滚动条失效(来源网络-保存)
ios上iframe滚动条失效最近有个需求要把后台改成手机也能浏览,一些数据表格都是用的iframe,在手机上浏览iframe设置了高度(例如500px)。倘若iframe的内容足够长超出了iframe设定的高度时,在iphone,ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示。上网查了资料:...
完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
解决iframe在ios中无法滚动的bug
在解决iframe在ios无法滚动的bug中,需要在iframe外面包裹一层div,如下:&amp;lt;div class=&quot;scroll-wrapper&quot;&amp;gt; &amp;lt;iframe src=&quot;&quot;&amp;gt;&amp;lt;/iframe&amp;gt; &amp;lt;/div&amp;gt;然后设置scroll-wrapper的样式,给scroll-wrapper添加-webkit-overflow-scrolling: tou...
移动端滚动穿透问题
定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透” 解决方案1 在弹出层的touchstart事件中调用preventDefault 这种方法不可取,至少有3个缺点: 如果弹出层本身是有滚动(条)的话,将会导致弹出层无法滚动,此时用这种方法无异于饮鸩止渴。 一个很常见的场景,点击弹出层,弹出层消失掉,此时也无法触发弹出层的点击回调事件。 弹...
iOS端html中的iframe样式错误(滚动条消失)
标题项目中需要将html页面分别封装成安卓app和iOS,页面在安卓上运行正常,但是在iOS中,iframe样式错误,没有了滚动条,将页面撑开了(iframe中引用的是富文本编辑器页面) 标题解决方案:在iframe外套一层div,设置div的样式 代码: .warpper { overflow: auto; -webkit-overflow-scroll...
关于移动端h5页面不能滑动问题的解决办法
页面不能滑动无非就是css和js两个方面的问题 有的人说如果我写很多个p标签不写任何样式看能不能滑动,如果能滑动说明是样式的原因,要是也不能滑动那就应该是js的原因,是有一定的道理的,但是先别忘了看一下你的html或body是不是加了height:100%;overflow:hidden; 1.下面分先说css的问题,主要排查overflow:hidden; 检查也有一定
ios上iFrame滚动条失效
在做公户号的时候,有一个页面引入了IFrame。然后出现了一个很尴尬的问题,iframe不出现滚动条,而且在屏幕高度以外的内容都被截掉了。百度之后,找到了解决方案,亲测可行~要点只要两个:1.将iFrame包裹在一个div中;2.给这个div赋予一个已出滚动样式。以下给出代码:jsp部分:&amp;lt;div class='scroll-wrapper'&amp;gt;&amp;lt;iframe src='***' ...
iPhone手机浏览器运行嵌入页面的iframe时候会撑全屏,页面在安卓手机上正常,解决办法
<script type="text/javascript"> setTimeout(function(){   //此代码pc端有用,iphone端有用,获取设备操作系统 var platform = navigator.platform; if (platform=="iPhone") {
mui 上拉加载/下拉刷新异常 双滚动条异常
在写上篇随笔的时候,突然想起来以前总结过的东西,拿出来分享下 遇到问题: 1.上拉加载后,出现没有更多数据。这时候返回顶部: mui('#refreshContainer').pullRefresh().scrollTo(0, 0, 100); 返回后,页面会消失,其实是页面又回到返回之前的(x,y)    解决办法:mui('#refreshContainer').pullRefr
ios上iframe 宽度不能够按照100%匹配问题
今天一位小公主问我为什么ios上iframe 宽度不能够按照100%匹配,为她解答后写了这篇帖子,希望能够帮助到大家! 闲话不多说码上: &amp;lt;style&amp;gt; .frame_box { width: 100%; height: 100%; } .my_frame { width: 100%; height: 100%; border: 0; }...
解决 iframe 在 iPad 上不能滚动的问题
今天要在web中嵌套一个网址或本地HTML,用到了iframe,在电脑上设置scrolling=‘auto’,宽度高度,会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。  但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的大小。设置overflow:hidden都没用
手机H5页面iframe子页面 禁止 父页面滚动条,滑动
原网页http://www.daixiaorui.com/read/158.html当做弹窗效果时,希望弹窗出现的时候网页不可再上下滚动、翻页,可以用body{overflow:hidden},可是做手机站的时候,就不兼容了。试了很多次都没有用,后来找到了解决的办法,就是要html,body同时设为overflow:hidden。具体实现范例代码:css样式部分:.ovfHiden{overflo...
mui Popover弹出层区块滑动问题
区块滑动块父级元素高度大于滑动区域高度导致无法滑动 一开始我都没有注意到这个问题,后来发现问题所在,仔细想想也是情理之中。如果子元素(滑动区域)高度小于父元素(滑动区域的父元素)高度,还需要滑动吗?(手动滑稽) mui 区域滑动我就不说怎么使用了,戳官方文档。 这里的popover层做为父级元素,其内部元素为滑动区域...
前端框架layer ios不支持弹出页面滚动条
问题:最近用前端框架layer做项目,弹出层(iframe)在web端和安卓上都有滚动条,可到了ios上就不支持上下滚动。 解决方法: .scroll-wrapper { -webkit-overflow-scrolling: touch; overflow-y: scroll; } layer.open({ type: 2,titl
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓) 最近做公司的支付APP,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口。刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面
mui框架 页面无法滚动解决方法
只需要初始化一下就可以了 mui.init();(function($){ $(&quot;.mui-scroll-wrapper&quot;).scroll({ //bounce: false,//滚动条是否有弹力默认是true //indicators: false, //是否显示滚动条,默认是true }); })(mui);
解决mui scoll真机调试鼠标滚轮能滚动,而手机不能滚动问题
直接注释掉之前写的滚动条初始化就ok了 // mui.init(); // (function($) { // $(&quot;.mui-scroll-wrapper&quot;).scroll({ // bounce: true, //滚动条是否有弹力默认是true // indicators: 0.006, //是否显示滚动条,默认是true // ...
移动端滚动穿透解决方案
/解决移动端滚动穿透样式/  body.modal-open {  position: fixed;  width: 100%;  } //scrollingElement兼容性代码  (function () {  if (document.scrollingElement) {  return  }  var element = null  function scro
IOS端拖动的问题
解决bootstrap-table在IOS端不能X轴拖动的问题
使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。
套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”。真的是不错的框架。 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现下拉刷新,上拉加载的功能呢? 首先需要一个容器: 1 下拉刷新容器--> 2 div id="refreshContainer" class="mui-content mui-scroll-wr
Android手机版浏览器DIV滚动条失效解决方案
除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支持DIV的滚动条(说几乎是因为新版的IOS已经支持) 这个应该算是完美解决方案了,需要注意的是setTimeout,必须要在内部的HTML解析完毕,JS获取它的高度不会出错的时候才可以执行,一般来说100毫秒差不多了.如果内部是个大图片,且高度不固定的时候,倒计时要久一点.         &amp;lt;!DOCTYPE html...
mui区域滚动失效的问题
在开发 mui加vue 做开发的时候发行这两个框架一起使用问题真的太多了无力吐槽 渲染内容区域要用一个元素包起来(推荐用div) 高度必须auto 或者不设置 否则无法滚动 mui-scroll-wrapper 的overflow 改成 scroll 因为overflow默认是hidden, &amp;lt;div style=&quot;top: 230px;overflow: scroll;height...
iframe在ios设备宽度不能100%
不知道大家是否有遇到过使用iframe嵌套其他域名的情况。 眼下我就遇到了一个项目,项目出于开发中,但是客户要求使用正式域名访问。 所以我们在正式服务器上放了一个页面使用iframe嵌套测试域名。 但是过程中遇到了一个问题iframe在ios设备宽度不能100%,只能显示一半,如下图: 但是在安卓手机上面访问是正常的。 历经千辛万苦,终于找到一丝眉目。 原来当”scrolling”设置...
解决在Safari浏览器上,iframe无法滚动的问题
在iframe外层嵌套一个div,并添加如下css -webkit-overflow-scrolling: touch;       overflow-y: scroll;        
html5可拖动的滚动条样式修改
关于html5中, input标签的type="range"样式的修改: 下面综合一个小例子: CSS,Jquery精美进度条和滑动条插件 /*进度条的边框颜色 高 背景颜色*/ ::-moz-range-track { border: 1px solid green; height: 20px; background: #f0f3f9; } /
解决iframe出现两个滚动条的问题
花了一个多小时,终于解决了因为iframe框架出现两个滚动条的问题。原理( 借鉴了网上kaka的思路,但是js与他写的不一样)是: 1.强制隐藏最上层窗口的滚动条 2.获取浏览器窗口的高度 3.用浏览器窗口的高度减去头部iframe的高度就是内容iframe的高度了             main     ">          $(function(){     
MUI在ios中的一些问题
MUI开发中,ios跟Android是存在差异,目前碰到的问题有以下几种 1,IOS跟Adroid在margin值时,存在差异,这时候只要让手机判断是IOS还是Android即可,这里给出两种方式判断 console.log(mui.os),可以看到//第一种if(mui.os.android){ //注意,这里是小写的android $(&quot;#header&quot;).css(&quot;margin-to
iscroll 的上拉刷新下拉加载 及卡顿的解决办法
function load() { pullDown = $("#pullDown"), loadingStep = 0; //加载状态0默认,1显示加载状态,2执行加载数据,只有当为0时才能再次加载,这是防止过快拉动刷新   pullDown.hide(); myScroll = new IScroll("#wrapper", { disableMouse: false, d
mui 隐藏滚动条
/*隐藏滚动条*/ mui.plusReady(function() { plus.webview.currentWebview().setStyle({ scrollIndicator: 'none' }); });
解决iframe 右边有空白的问题
在VS.NET 2008 中新建页时会有 这个标准,但对于IE 6 不支持这个标准,故在使用iframe是右边会有空白。将此句去掉并且需要把ifram所在的页面的body设置为overfolw:auto 还要把iframe里面要显示的页面也设置为overfolw:au
利用滚动条进行移动端水平滑动
需要做水平触摸滑动的效果,但是因为是一个公众号内嵌网页,不想引用插件或者有太多的代码,就想着用浏览器自带的滚动条达到所期望的效果,结构及兼容优化如下:Question:(1)实现水平滑动(2)滚动条滚动,自动显示 li.active 项所在的位置1. HTML结构&amp;lt;div class=&quot;scroll_hide&quot;&amp;gt; &amp;lt;div id=&quot;machine_box&quot;&amp;gt; &amp;l...
调用mui插件,窗体无法滑动问题
最近做移动端开发,需要一个侧滑功能,由于偷懒,调用了mui的侧滑功能,然而引用了mui.js之后,侧滑是可以了,放在移动端的滑动事件就没了。 查找再三,发下如下问题。mui里将滑动事件自己禁止了。 // document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false) 原生配了个方法,支持区域...
mui下拉刷新在安卓真机环境下无效
问题:。下拉刷新在浏览器及IOS环境中可以正常使用,但是打包成安卓应用程序,打开后下拉刷新就无法使用,但是上拉加载可以使用网上搜了一下,找到了一些方法目前总结出了两种。 你如果急切的想知道解决方法,请直接略过问题。 一:问题 HTML   图1 html dom结构 JS 我也使用了VUE进行双向绑定。 图2 js代码mui.init初始化   上面这张图是VUE的安装时间...
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 ios手机端开发教程 安卓ios培训