Question

我在iOS设备上渲染网站时遇到问题。我有一个根本不会在iOS设备上滚动的iframe（在iOS 5.1.1上测试）。这是网站：http://pixel2html.sitesbycoop.com/fanwu/我只需要帮助这个...我试过-webkit-overflow-srolling：touch;在每个父元素上可能。请帮助，如果需要，我非常乐意提供更多信息。

我正在使用jquery将iframe中的iframe加载到以下代码中：

主页上的iframe容器标记：

<div class="overlay">

  <div class="frame-container"></div>

</div>

Iframe模板的标记

<!doctype html>
<html class="no-js" lang="en">
 <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fan Wu | Welcome</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/port-set-viewer-styles.css" type="text/css" />
 </head>
<body class="port-set">
<div class="row" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
        <!--content and more markup -->
</div>
</body>
</html>

CSS

.overlay{
 position: fixed;
 background: rgba(0,0,0,0.9) url('img/loader.gif') no-repeat center center;
 top: 0px; bottom: 0px;
 left: 0px; right: 0px;
 z-index: 100;
 display: none;
}
.frame-container {
 width: 100%;
 height: 100%;
}
.frame-container iframe {
 position: fixed;
 top: 0px;
 z-index: 1000;
 border: none;
 transition: opacity 1s;
 left: -100%;
 height: 100%;
 width: 100%;
}
.frame-container iframe.active{
 opacity: 1 !important;
 left: 0;
}

JS

jQuery.noConflict();

jQuery(document).ready(function(){

    jQuery(".image-box").click(function(e){

    /* Store link into variable, href */
    var href = jQuery(this).find("a").attr("href");

    /* Activate overlay */
    jQuery(".overlay, body, .close").addClass("active");

    /* Set iframe's src attribute to the stored href */
    jQuery(".frame-container").html('<iframe style="opacity: 0;" width="100%" height="100%" src="'+href+'"></iframe>');

    /* Animate iframe into view */
    jQuery('iframe').load(function(){   
            jQuery(this).addClass("active");
            jQuery(".overlay").addClass("remove-graphic");
    });
    e.preventDefault(); 
});

jQuery(".close").click(function(e){
    jQuery(".overlay, .frame-container, iframe, body, .close").removeClass("active remove-graphic");
    e.preventDefault(); 
});

jQuery(function(){

    jQuery(".image-box").preloader();   
});

});

iOS Iframe滚动

0 个答案: