解决 iframe 在 iPad 上不能滚动的问题

今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。 
但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的大小。设置overflow:hidden都没用。 



怎么让ipad safari 中的iframe的内容在固定大小中可滚动？ 

网上说要用seamless属性。直接写个seamless。但是这个属性ipad的safari不支持。chrome是支持的。 

IE6 – Windows: no support 
IE7 – Windows: no support 
IE8 – Windows – Windows: no support 
IE9 beta – Windows: no support 
Firefox 3.6 – Windows: no support 
Firefox 3.6 – OSX: no support 
Firefox 4.0 – beta Windows: no support 
Firefox 4.0 – beta OSX: no support 
Safari OSX: no support 
Chrome 7 – Windows: no support 
Chrome 7 – Windows: no support 
Chrome 9 – OSX: no support 
Opera 11 – OSX: no support 

测试例子： 
http://www.maxdesign.com.au/jobs/example-seamless/ 

所以以上方法都无法解决ipad safari中iframe滚动的问题。 

解决办法： 
在iframe外加一层div，设置样式-webkit-overflow-scrolling:touch; overflow: scroll; 
让超出div的内容可以通过touch来滚动。 

另外，如果iframe的src不是网址，而是本地的html，则需要给HTML的DOM添加监听事件，让html的body可以监听到touch事件，让嵌套的html也可以滚动。

var toScrollFrame = function(iFrame, mask) {
					if (!navigator.userAgent.match(/iPad|iPhone/i))
						return false;
					//do nothing if not iOS devie

					var mouseY = 0;
					var mouseX = 0;
					jQuery(iFrame).ready(function() {//wait for iFrame to load
						//remeber initial drag motition
						jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {
							mouseY = e.targetTouches[0].pageY;
							mouseX = e.targetTouches[0].pageX;
						});

						//update scroll position based on initial drag position
						jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {
							e.preventDefault();
							//prevent whole page dragging

							var box = jQuery(mask);
							box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);
							box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);
							//mouseX and mouseY don't need periodic updating, because the current position
							//of the mouse relative to th iFrame changes as the mask scrolls it.
						});
					});

					return true;
				};

				toScrollFrame('.myFrame', '.myMask');

最终代码 

	
		
		
		
		
		
		
		
		
	
	
		

			HEADER - use 2 fingers to scroll contents: