{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 混吃等死 的问题《How can I scroll an iframe in iOS 4 with 2 fingers》','https://www.manongdao.com/q-359978.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I've found many related questions but none with an answer that explains how to scroll an iframe using the 2 finger method in iOS 4.
I am able to scroll a div with 2 fingers by setting a width and height attribute and setting overflow: scroll;. Here's a more complete example of this:
<div style='width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;'>
Just imagine a bunch of content is in here, spanning well over 200px
worth of height. You can scroll this just fine in iOS 4 by using 2
fingers, or in iOS 5 by swiping 1 finger thanks to
"-webkit-overflow-scrolling: touch;".
</div>
This same method isn't working on iframes on my iPad 1 running iOS 4.3. Here's a complete example that won't scroll with any combination of fingers in iOS 4 (although, of course, the -webkit-overflow-scrolling allows it to work on iOS5):
<html>
<head>
<style type="text/css">
#scroller {
width: 280px;
height: 200px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#scroller iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="scroller">
<iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>
</body>
</html>
I must add that I can get 2 finger scrolling to work if I set the width and height of the iframe to actual pixel values, like height: 1000px;, but I will never know how tall the iframe's content will be. So, perhaps the real question is how can I convince mobile Safari in iOS 4 that the iframe inside of this div is indeed larger than 280x200 pixels?
A simple idea posted by rossb @ github.com/fancyapps worked beautifully for both scrolling in iOS 4 (2 fingers) and iOS 5 (1 finger) and solves the "blank content on scroll" issues that iOS 5's iframes seem to be plagued with. Basically, you don't want the iframe to handle any scrolling. Give it a fixed width/height and wrap the scrollable content in your included file in a
divthat can be scrolled.Here's an example:
a-file.html: