IOS上iframe的滚动条失效的解决办法

更新时间：2021年03月19日 15:46:10 作者：荒漠千蝶

这篇文章主要为大家详细介绍了IOS上iframe的滚动条失效的解决办法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

问题描述：

iframe设置了高度（例如500px）。倘若iframe的内容足够长超出了iframe设定的高度时，在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。

问题重现：

结构：

index.html :

<style>　　

#iframe{height:500px;}

</style>

<div id="content">
 <iframe frameborder="0" src="iframe.html" id="iframe"></iframe>
</div>

iframe.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>IOS frame 滚动条 demo</title>
</head>
<body><div class="container">
 我是一堆很长。很长，很高，很高的内容。
</div>
<script src="../jquery.js"></script>
</body>
</html>

问题原因：

在IOS设备中，iframe内部的html的滚动条无法生效。

---------------------------------------

解决办法：

把iframe中body里的内容全部包裹一层，然后设置包裹这一层的height，使用属性-webkit-overflow-scrolling:touch;overflow:auto;

代码如下：

iframe.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>IOS frame 滚动条 demo</title>
</head>
<body>
<style>
#wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}
</style>
<div class="container">
 我是一堆很长。很长，很高，很高的内容。
</div>
<script src="../jquery.js"></script>
<script>
 var UA = navigator.userAgent;
 var forIOS = function(){
  if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;}
  if($('#wrapper').length){return;}
  $('body').children().not('script').wrapAll('<div id="wrapper"></div>');
 }();
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解iOS - ASIHTTPRequest 网络请求
本篇文章主要介绍了iOS - ASIHTTPRequest 网络请求，详细的介绍了 ASIHTTPRequest的使用，具有一定的参考价值，有兴趣的可以了解一下。
2016-12-12
iOS输入框的字数统计/最大长度限制详解
在开发中经常会遇到键盘输入的字符长度的限制，下面这篇文章主要给大家介绍了关于iOS输入框的字数统计/最大长度限制的相关资料，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2018-06-06
IOS获取指定年月的当月天数
本文通过实例演示在IOS开发中如何获取指定年月的当月天数，有需要的小伙伴们可以参考借鉴。
2016-08-08
iOS多线程应用开发中使用NSOperation类的基本方法
这篇文章主要介绍了iOS多线程应用开发中使用NSOperation类的基本方法,代码基于传统的Objective-C,需要的朋友可以参考下
2015-11-11
iOS获取手机ip地址代码
这篇文章主要为大家详细介绍了iOS获取手机终端ip地址的相关代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
Objective-C基础自定义对象归档详解及简单实例
这篇文章主要介绍了Objective-C基础自定义对象归档详解及简单实例的相关资料,需要的朋友可以参考下
2017-04-04
iOS实现微信分享多张图片功能
这篇文章主要为大家详细介绍了iOS实现微信分享多张图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
Flutter Widgets之标签类控件Chip详解
这篇文章主要为大家介绍了Flutter Widgets之标签类控件Chip详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
iOS实现调用QQ客户端发起临时会话
本篇文章主要给大家详细分析了用IOS实现调用QQ客户端发起临时会话的功能，对此有需要的朋友收藏分享下。
2018-02-02
swift3.0实现图片放大缩小动画效果
这篇文章主要为大家详细介绍了swift3.0实现图片放大缩小动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09