iOS上滚动iframe解决了，但是iframe页面显示不完整

2022-01-11 00:00:00 iframe web-applications jquery-plugins html cordova

我正在尝试在iOS上滚动一个iframe，我成功了，它滚动得很好，参考:

自动使用 iOS 原生滚动，在其他平台上你会激活 nicescroll.

我在装有 iOS 5.1 的 iPad 上进行了测试.

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>

解决方案

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.

相关文章