ios上iFrame滚动条失效

原创 2018年04月16日 17:30:58

在做公户号的时候,有一个页面引入了IFrame。然后出现了一个很尴尬的问题,iframe不出现滚动条,而且在屏幕高度以外的内容都被截掉了。

百度之后,找到了解决方案,亲测可行~

要点只要两个:1.将iFrame包裹在一个div中;2.给这个div赋予一个已出滚动样式。

以下给出代码:

jsp部分:

<div class='scroll-wrapper'><iframe src='***' width='97%' height='320px' scrolling='yes'></iframe></div>

css部分:

/**
iOS兼容iFrame滚动条样式
 */
.scroll-wrapper {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    width: 98%;
    height: 330px;
}
.scroll-wrapper iframe {
    width: 98%;
    height: 320px;
}

版权声明:本文为博主原创文章,转载请标明出处哦。 https://blog.csdn.net/sinat_32034679/article/details/79963560

完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题

完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
  • baohuan_love
  • baohuan_love
  • 2014-07-24 15:20:28
  • 3379

JS各种iframe弹出控件没有滚动条或者失灵的解决办法

JS各种iframe弹出控件没有滚动条或者失灵的解决办法
  • Zuocheng_Liu
  • Zuocheng_Liu
  • 2015-01-06 18:42:00
  • 5481

使IFRAME在iOS设备上支持滚动

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

关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法

项目中有个需求时在页面的最下面有一排按钮,这排按钮需要固定到页面的最下面,不能随着屏幕的滚动为滚动。 问题: 功能是使用css的position:fixed; bottom:0;属性设置的。 单独...
  • MarkAsh
  • MarkAsh
  • 2016-09-22 10:34:20
  • 5283

解决 iframe 在 iPad 上不能滚动的问题

今天要在web中嵌套一个网址或本地HTML,用到了iframe,在电脑上设置scrolling=‘auto’,宽度高度,会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属...
  • jqrsdsy
  • jqrsdsy
  • 2015-03-02 14:28:35
  • 11975

前端框架layer ios不支持弹出页面滚动条

问题:最近用前端框架layer做项目,弹出层(iframe)在web端和安卓上都有滚动条,可到了ios上就不支持上下滚动。 解决方法: .scroll-wrapper { -webki...
  • ding_dq
  • ding_dq
  • 2017-03-13 16:54:45
  • 1537

ios系统下iframe固定定位失效的方法

这个是ios下iframe固定定位失效的方法 http://qq704855854.blog.163.com/blog/static/191118355201531492912678/ $(par...
  • qq_36294683
  • qq_36294683
  • 2018-02-05 10:53:34
  • 108

解决iframe内弹窗鼠标滚轮事件失效

//解决iframe内弹窗鼠标滚轮事件失效 (function () { var obj = window.parent.document; // function onMouseW...
  • samete
  • samete
  • 2015-06-09 10:59:33
  • 2816

ios下iframe内的加载更多为什么失效了?

最近做一个页面遇到ios下拉加载的功能失效的问题。查看页面后发现该页面是用iframe引的一个wap页,由于手机上不好测试,在经过n次alert后排查了原因。 1.ios页面下拉的时候iframe的...
  • webjhh
  • webjhh
  • 2016-06-08 11:07:29
  • 2343

解决iPad上的iframe无法触摸滚动

解决iPad上的iframe无法触摸滚动 日期:2012-08-02    阅读:141   分类:HTML~CSS 不知道大家发现没有,在iPad上的iframe是没有滚动条的,用手指触...
  • wide288
  • wide288
  • 2013-01-29 10:22:07
  • 7069
收藏助手
不良信息举报
您举报文章:ios上iFrame滚动条失效
举报原因:
原因补充:

(最多只允许输入30个字)