Solution to the failure of the scroll bar on an iframe on IOS _ios

Problem Description:

The IFRAME is set to a height (for example, 500px). If the content of the IFRAME is long enough to exceed the height of the iframe set, on devices such as the ipad. The scroll bars for HTML inside the IFrame do not appear. And live from the 500px truncated, (similar to the effect of Overflow:hidden) The following content 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>
 
 

problem Reason:

In iOS devices, the HTML scroll bar inside the IFRAME cannot take effect.

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

Solution:

The content of the body inside the IFRAME is wrapped in a layer, and then set the height of the package, using attribute-webkit-overflow-scrolling:touch;overflow:auto;

The code is as follows:

Iframe.html

<! DOCTYPE html>
 
 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.