可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am trying to scroll an iframe on iOS, and I succeeded, it's scrolling well, reference:

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

BUT, all solutions have an issue: the iframe page is not completely displayed...

I tested on my iphone and ipad, the iframe page displays choppy.

any idea?

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'scroll',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
    </script>
    <title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>

回答1:

I found a combination of div with "absolute" style and nicescroll do fix choppines.

You have to load nicescroll on the page loaded by iframe. In the same page wrap all you content with a div (with style absolute)

  #content {   position:absolute; }

Load nicescroll using wrapped div content.

  $(document).ready(function() {
    $("html").niceScroll("#content"); 
  });

Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html

Automatically, with iOS native scroll has used, in other platform you got nicescroll active.

I have test on iPad with iOS 5.1.

回答2:

This solution is a bit of a hack, but is tested and works fine on iOS:

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
    </object>       
</div>

Basically, since scrolling works fine in a DIV, you embed your page code using the object tag. The problem is, due to the same origin policy, you can't determine your target page's dimensions. I found that setting a huge page size is perfectly workable (no delay or choppyness noticed...just blank space)

You can easily determine the client OS and only add this code to iOS devices.

回答3:

Try adding -webkit-transform:translate3d(0,0,0) to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.

In main page style:

iframe {  -webkit-transform:translate3d(0,0,0); }

and in iframe style:

p { -webkit-transform:translate3d(0,0,0); }

回答4:

I found this to be a problem with relatively positioned content inside the frame. Get rid of this behavior when removing position: relative;

Scrolling iframe on iOS is solved, BUT the iframe

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

Scrolling iframe on iOS is solved, BUT the iframe

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮