iOS上滚动iframe解决了，但是iframe页面显示不完整-前端问题

Scrolling iframe on iOS is solved, BUT the iframe page display incomplete(iOS上滚动iframe解决了，但是iframe页面显示不完整)

本文介绍了iOS上滚动iframe解决了，但是iframe页面显示不完整的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在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.

这篇关于iOS上滚动iframe解决了，但是iframe页面显示不完整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐