Of Stack

Solution to iframe scroll bar failure on IOS

  • 2020-08-22 22:47:39
  • OfStack

Problem description:

iframe sets the height (for example, 500px). If the content of iframe is long enough to exceed the height set by iframe, on devices such as ipad. The scroll bar for iframe's internal html does not appear. It is also truncated from 500px (similar to overflow: hidden) and the content below is no longer displayed.

Problem recurrence:

Structure:

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  The scroll bar  demo</title>
</head>
<body><div class="container">
   I am a 1 Heap is very long. Very long, very high, very high content. 
</div>
<script src="../jquery.js"></script>
</body>
</html>

Problem:

On the IOS device, the scroll bar for html inside iframe is not working.

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

Solutions:

Wrap all the contents in body in iframe in 1 layer, then set the height to wrap the 1 layer, using attribute -ES48en-ES49en-ES50en :touch; overflow: auto;

The code is as follows:

iframe.html 


<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>IOS frame  The scroll bar  demo</title>
</head>
<body>
<style>
#wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}
</style>
<div class="container">
   I am a 1 Heap is very long. Very long, very high, very high content. 
</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>
Related articles: