解决ios系统下iframe滚动失效问题。(附带 kindeditor.js等插件ios滚动失效处理)

背景:最近因早期项目中反映出很多页面在ipad以及苹果手机中出现无法滑动的问题,所以开始去排查代码中的问题,经过重重测试最后定位到iframe的问题。

处理方式:通过查找才发现在ios下 iframe的滚动兼容确实存在问题,网上搜集到处理方式是:在iframe的外层嵌套一个div,设置div滑动:

iframe的高度可以通过js进行动态计算赋值。设置样式-webkit-overflow-scrolling:touch;overflow:scroll;让超出div的内容可以通过touch来滚动;-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。

附:记录一下测试过程中,突然告诉我一些编辑区域中输入内容超出文本域后也无法滚动了,沃特法?后来查看后,因为我们的文本框用的都是kindeditor.js插件,kindeditor的编辑区是用iframe实现的,但是倘若iframe里面的内容足够长超出iframe设定的高度时,在iphone,ipad等ios设备上。iframe内部的区域滚动条不出现,导致无法完全显示内容区域。

初始化插件时,通过afterCreate方法中进行判断,如果是ios设备则在iframe 外层div加上如上图所示样式。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值