html5 – 在iOS上滚动iframe已解决,但iframe页面显示不完整

前端之家收集整理的这篇文章主要介绍了html5 – 在iOS上滚动iframe已解决,但iframe页面显示不完整前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在iOS上滚动iframe,我成功了,滚动得很好,参考:

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

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

但是,所有解决方案都存在问题:iframe页面未完全显示

我在我的iphone和ipad上测试过,iframe页面显示不稳定.

任何的想法?

例:

<!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>

解决方法

我找到了div与“绝对”风格的组合,nicescroll确实修复了choppines.

您必须在iframe加载的页面上加载nicescroll.
在同一页面中用div包装所有内容(绝对样式)

#content {   position:absolute; }

使用包装的div内容加载nicescroll.

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

链接到演示页面,您可以检查代码http://areaaperta.com/nicescroll/demo/iframe6.html

自动使用iOS本机滚动,在其他平台上你有nicescroll活动.

我在iPad上测试了iOS 5.1.

原文链接:https://www.f2er.com/html5/168359.html

猜你在找的HTML5相关文章