How to fix the failure of the IFRAME scroll bar on iOS.

Problem description:

IFRAME sets the height (for example, 500px ).If the content of IFRAME is long enoughIFRAME settingsOn iPad and other devices.IFRAME internal htmlThe scroll bar does not appear. In addition, the content below (similar to the overflow: hidden effect) is not displayed.

Problem reproduction:

Structure:

Index.html:

<Style>
# IFRAME {Height: 500px ;}
</Style>
<DivID= "Content"><IFRAMEFrameborder= "0"SRC= "Iframe.html"ID= "Iframe"> </IFRAME></Div>
 

 

Iframe.html:

 <!  Doctype html  >  <  Html  Lang  = "ZH-CN"  >  <  Head  >  <  Meta  Charset  = "UTF-8"   /> <  Title  > IOS frame scroll bar demo </  Title  >  </  Head  >  <  Body  >  
<  Div  Class  = "Container"  > I am a bunch of very long. Very long, very high, and very high. </  Div  >  <  Script  SRC  = "../Jquery. js"  > </  Script  >  </  Body  >  </  Html  > 

 Cause:

On iOS devices, the HTML scroll bar in IFRAME cannot take effect.

 Solution:

Wrap all the content in the body in IFRAME into one layer, set the height of this layer, and use the attribute-WebKit-overflow-scrolling:Touch;Overflow:Auto;

CodeAs follows:

Iframe.html

 <!  Doctype html >  <  Html  Lang  = "ZH-CN"  >  <  Head  >  <  Meta  Charset  = "UTF-8"   />  <  Title  > IOS frame scroll bar demo</  Title  >  </  Head  >  <  Body  >  <  Style  >  # Wrapper  {  Height  : 500px ;  -WebKit-overflow-scrolling  :  Touch  ;  Overflow  :  Auto  ;  }  </  Style  > <  Div class  = "Container"  > I am a bunch of very long. Very long, very high, and very high. </  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  >