blocks|key|1048562|text|iOS+5添加了以下样式，可以将其添加到父div中，以便滚动工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048563|-webkit-overflow-scrolling:touch|offset|length|style|CODE|1048564|entityMap^0|0|0|W|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>iOS 5 added the following style that can be added to the parent div so that scrolling works.  </p>

<p><code>-webkit-overflow-scrolling:touch</code></p>


blocks|key|1048903|text|答案中提到的-webkit-overflow-scrolling:touch实际上是可能的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1048904|<div+style="overflow:scroll+!important;+-webkit-overflow-scrolling:touch+!important;">
+++++<iframe+src="YOUR_PAGE_URL"+width="600"+height="400"></iframe>
</div>|code-block|syntax|javascript|1048905|但如果您无法在iframe内上下滚动，如下图所示，|1048906|📷|atomic|1048907|​|1048908|你可以试着像这样用两个手指对角线滚动，|1048909|1048910|1048911|1048912|这在我的情况下实际上是有效的，所以如果你还没有找到解决方案，那么就分享一下吧。|1048913|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/17047618c999f0560cfcd0d286d25952.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/44ecd0d9ada8858d07971fd5f6b4f2d7.png^0|6|W|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|P|3|Q|5|6|7|1I|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1J|8|@]|D|@]|E|$]]|$1|T|3|Q|5|6|7|1K|8|@]|D|@]|E|$]]|$1|U|3|N|5|O|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|V|3|Q|5|6|7|1P|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15|16|-4]]|17|$5|11|12|13|E|$14|18|16|-4]]]]

<p><code>-webkit-overflow-scrolling:touch</code> as mentioned in the answer is infact the possible solution. </p>

<pre><code>&lt;div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;"&gt;
     &lt;iframe src="YOUR_PAGE_URL" width="600" height="400"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p>But if you are unable to scroll up and down inside the iframe as shown in image below,
<img src="https://i.stack.imgur.com/vJiQe.png" alt="enter image description here"></p>

<p>you could try scrolling with 2 fingers diagonally like this,</p>

<p><img src="https://i.stack.imgur.com/8G7Hl.png" alt="enter image description here"></p>

<p>This actually worked in my case, so just sharing it if you haven't still found a solution for this.</p>


blocks|key|1048480|text|iframes似乎不能正常显示和滚动。您可以使用对象标签来替换iframe，其内容将可以用两个手指滚动。下面是一个简单的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048481|<html>
++++<head>
++++++++<meta+name="viewport"+content="minimum-scale=1.0;+maximum-scale=1.0;+user-scalable=false;+initial-scale=1.0;"/>
++++</head>
++++<body>
++++++++<div>HEADER+-+use+2+fingers+to+scroll+contents:</div>
++++++++<div+id="scrollee"+style="height:75%25;"+>
++++++++++++<object+id="object"+height="90%25"+width="100%25"+type="text/html"+data="http://en.wikipedia.org/"></object>
++++++++</div>
++++++++<div>FOOTER</div>
++++</body>
</html>|code-block|syntax|javascript|1048482|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It doesn't appear that iframes display and scroll properly. You can use an object tag to replace an iframe and the contents will be scrollable with 2 fingers. Here's a simple example:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;meta name="viewport" content="minimum-scale=1.0; maximum-scale=1.0; user-scalable=false; initial-scale=1.0;"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;HEADER - use 2 fingers to scroll contents:&lt;/div&gt;
        &lt;div id="scrollee" style="height:75%;" &gt;
            &lt;object id="object" height="90%" width="100%" type="text/html" data="http://en.wikipedia.org/"&gt;&lt;/object&gt;
        &lt;/div&gt;
        &lt;div&gt;FOOTER&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|834305|text|这不是我的答案，但我只是抄袭了https://gist.github.com/anonymous/2388015的答案，因为答案很棒，完全解决了问题。功劳完全归功于匿名作者。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|834306|<script+type="text/javascript"+src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script+type="text/javascript">
++++$(function(){
++++++++if+(/iPhone%7CiPod%7CiPad/.test(navigator.userAgent))
++++++++++++$('iframe').wrap(function(){
++++++++++++++++var+$this+=+$(this);
++++++++++++++++return+$('<div+/>').css({
++++++++++++++++++++width:+$this.attr('width'),
++++++++++++++++++++height:+$this.attr('height'),
++++++++++++++++++++overflow:+'auto',
++++++++++++++++++++'-webkit-overflow-scrolling':+'touch'
++++++++++++++++});
++++++++++++});
++++})
</script>|code-block|syntax|javascript|834307|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/anonymous/2388015^0|F|15|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>This is not my answer, but I just copied it from <a href="https://gist.github.com/anonymous/2388015" rel="noreferrer">https://gist.github.com/anonymous/2388015</a> just because the answer is awesome and fixes the problem completely. Credit completely goes to the anonymous author.</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('&lt;div /&gt;').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'auto',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
&lt;/script&gt;
</code></pre>


blocks|key|833931|text|正如在其他帖子中提到的，overflow:+auto；&+-webkit-overflow-scrolling:+touch的css值组合；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|833932|在同时应用于有问题的iframe及其父div时有效|833933|在非接触式浏览器上使用双滚动条带来的不幸副作用。|833934|我使用的解决方案是通过javascript/jquery添加这些CSS值。它允许我在所有浏览器上使用一个基本的css。|833935|if+(isSafariBrowser()){
++++$('#parentDivID').css('overflow',+'auto');
++++$('#parentDivID').css('-webkit-overflow-scrolling',+'touch');
++++$('#iframeID').css('overflow',+'auto');
++++$('#iframeID').css('-webkit-overflow-scrolling',+'touch');
}|code-block|syntax|javascript|833936|其中isSafariBrowser()被定义为foll...|833937|var+is_chrome+=+navigator.userAgent.indexOf('Chrome')+>+-1;
var+is_safari+=+navigator.userAgent.indexOf("Safari")+>+-1;

function+isSafariBrowser(){
++++if+(is_safari){
++++++++if+(is_chrome)++//+Chrome+seems+to+have+both+Chrome+and+Safari+userAgents
++++++++++++return+false;
++++++++else
++++++++++++return+true;
++++}
++++return+false;
}|833938|这使得我的应用程序可以在iPad上运行注意1)没有在其他ios系统上测试2)没有在平板电脑上的安卓浏览器上测试，可能需要额外的更改|833939|(因此此解决方案可能不完整)|833940|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>As mentioned in other posts, the combination of css values of overflow: auto; &amp; 
-webkit-overflow-scrolling: touch;</p>

<p>works when applied to BOTH the iframe in question AND its parent div</p>

<p>With the unfortunate side-effect of double scrollbars on non-touch browsers.</p>

<p>The solution I used was to add these css values via javascript/jquery. Which allowed me to use a base css for all browsers</p>

<pre><code>if (isSafariBrowser()){
    $('#parentDivID').css('overflow', 'auto');
    $('#parentDivID').css('-webkit-overflow-scrolling', 'touch');
    $('#iframeID').css('overflow', 'auto');
    $('#iframeID').css('-webkit-overflow-scrolling', 'touch');
}
</code></pre>

<p>where isSafariBrowser() is defined as foll...</p>

<pre><code>var is_chrome = navigator.userAgent.indexOf('Chrome') &gt; -1;
var is_safari = navigator.userAgent.indexOf("Safari") &gt; -1;

function isSafariBrowser(){
    if (is_safari){
        if (is_chrome)  // Chrome seems to have both Chrome and Safari userAgents
            return false;
        else
            return true;
    }
    return false;
}
</code></pre>

<p>This allowed my application to work on an iPad 
Note
1) Not tested on other ios systems
2) Not tested this on Android browsers on tablets, may need additional changes</p>

<p>(so this solution may not be complete)</p>


blocks|key|834216|text|基于this+article，我整理了以下代码片段，它们提供了一些非常基本的功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|834217|<div+id+=+"container"></div>
<script>
function+setPDFHeight(){+
++++++++$("#pdfObject")[0].height+=+$("#pdfObject")[0].offsetHeight;+++
}+++
$('#container').append('<div+align="center"+style="width:+100%25;+height:100%25;+overflow:+auto+!important;+-webkit-overflow-scrolling:+touch+!important;">\
++++++<object+id="pdfObject"+width="100%25"+height="1000000000000"+align="center"+data="content/lessons/12/t.pdf"+type="application/pdf"+onload="setPDFHeight()">You+have+no+plugin+installed</object></div>');++
</script>|code-block|syntax|javascript|834218|显然，它远不是完美的(考虑到它实际上将页面高度扩展到无限大)，但这是我到目前为止找到的唯一可行的解决方法。|834219|entityMap|0|LINK|mutability|MUTABLE|url|http://scn.sap.com/community/developer-center/front-end/blog/2013/11/26/pdf-scrolling-on-ipad^0|2|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Based on <a href="http://scn.sap.com/community/developer-center/front-end/blog/2013/11/26/pdf-scrolling-on-ipad" rel="nofollow">this article</a>, I have put together the following snippet that provides some very basic functionality:</p>

<pre><code>&lt;div id = "container"&gt;&lt;/div&gt;
&lt;script&gt;
function setPDFHeight(){ 
        $("#pdfObject")[0].height = $("#pdfObject")[0].offsetHeight;   
}   
$('#container').append('&lt;div align="center" style="width: 100%; height:100%; overflow: auto !important; -webkit-overflow-scrolling: touch !important;"&gt;\
      &lt;object id="pdfObject" width="100%" height="1000000000000" align="center" data="content/lessons/12/t.pdf" type="application/pdf" onload="setPDFHeight()"&gt;You have no plugin installed&lt;/object&gt;&lt;/div&gt;');  
&lt;/script&gt;
</code></pre>

<p>Obviously it is far from perfect (given that it practically expands your page height to infinity), but it's the only viable workaround I've found so far.</p>


blocks|key|1049034|text|到目前为止，当我尝试的时候，没有一个解决方案对我完全有效(有时，只在二次加载时发生错误)，但作为一种变通方法，使用这里描述的对象元素，然后将其包装在可滚动的div中，然后将对象设置为非常高的高度(5000px)，这就为我做了这件事。这是一个很大的变通方法，效果不是很好(对于初学者来说，超过5000px的页面会导致问题--+10000px完全破坏了它)，但它似乎在我的一些测试用例中完成了工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1049035|var+style+=+'left:+...px;+top:+...px;+'+%2B
++++++++'width:+...px;+height:+...px;+border:+...';

if+(isIOs)+{
++++style+%2B=+';+overflow:+scroll+!important;+-webkit-overflow-scrolling:+touch+!important;';
++++html+=+'<div+style="'+%2B+style+%2B+'">'+%2B
+++++++++++'<object+type="text/html"+data="http://example.com"+'+%2B
+++++++++++'style="width:+100%25;+height:+5000px;"></object>'+%2B
+++++++++++'</div>';
}
else+{
++++style+%2B=+';+overflow:+auto;';
++++html+=+'<iframe+src="http://example.com"+'+%2B
+++++++++++'style="'+%2B+style+%2B+'"></iframe>';
}|code-block|syntax|javascript|1049036|希望苹果能解决Safari+iFrame的问题。|1049037|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>None of the solutions so far completely worked for me when I tried (sometimes, only buggy on secondary loads), but as a workaround, using an object element as described here, then wrapping in a scrollable div, then setting the object to a very high height (5000px) did the job for me. It's a big workaround and doesn't work incredibly well (for starters, pages over 5000px would cause issues -- 10000px completely broke it for me though) but it seems to get the job done in some of my test cases:</p>

<pre><code>var style = 'left: ...px; top: ...px; ' +
        'width: ...px; height: ...px; border: ...';

if (isIOs) {
    style += '; overflow: scroll !important; -webkit-overflow-scrolling: touch !important;';
    html = '&lt;div style="' + style + '"&gt;' +
           '&lt;object type="text/html" data="http://example.com" ' +
           'style="width: 100%; height: 5000px;"&gt;&lt;/object&gt;' +
           '&lt;/div&gt;';
}
else {
    style += '; overflow: auto;';
    html = '&lt;iframe src="http://example.com" ' +
           'style="' + style + '"&gt;&lt;/iframe&gt;';
}
</code></pre>

<p>Here's hoping Apple will fix the Safari iFrame issues.</p>


blocks|key|1048531|text|在经历了许多烦恼之后，我发现了如何在ipad上滚动iframe。秘诀是在iframe区域的左侧(可能稍微超出边界)进行垂直手指滑动(单指也可以)。在笔记本电脑或个人电脑上，滚动条在右边，所以我自然而然地花了很多时间在ipad上试验手指在右边的动作。只有当我尝试左侧时，iframe才会滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048532|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>After much aggravation, I discovered how to scroll in iframes on my ipad.  The secret was to do a vertical finger swipe (single finger was fine) on the LEFT side of the iframe area (and maybe slightly outside of the border).  On a laptop or PC, the scroll bar is on the right, so naturally, I spent of lot of time on my ipad experimenting with finger motions on the right side. Only when I tried the left side would the iframe scroll.</p>


blocks|key|833825|text|将overflow:+auto;添加到样式中，两个手指滚动应该可以工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|833826|entityMap^0|1|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Add <code>overflow: auto;</code> to the style and the two finger scroll should work.</p>


<p>According to the Apple iOS mantra it should be possible to scroll the contents of an IFRAME by dragging it with two fingers.  Unfortunately running the latest version of iOS on the iPad I have yet to find a single website with an IFRAME that scrolls using this method - no scrollbars appear either.</p>

<p>Does anyone know how a user is supposed to scroll the contents of an IFRAME with the mobile Safari?</p>


IFRAMEs and the Safari on the iPad, how can the user scroll the content?

根据苹果iOS的咒语，用两个手指拖动IFRAME应该可以滚动它的内容。不幸的是，在iPad上运行最新版本的iOS，我还没有找到一个使用这种方法滚动的带有IFRAME的网站--也没有出现滚动条。有人知道用户应该如何使用移动Safari滚动IFRAME的内容吗？

问iPad上的IFRAMEs和Safari，用户如何滚动内容？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPad上的IFRAMEs和Safari，用户如何滚动内容？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPad上的IFRAMEs和Safari，用户如何滚动内容？
EN