Javascript iOS中的iFrame，修复了定位和滚动问题_Javascript_Ios_Css_Iframe_Scroll

Javascript iOS中的iFrame，修复了定位和滚动问题

javascript ios css iframe scroll

Javascript iOS中的iFrame，修复了定位和滚动问题,javascript,ios,css,iframe,scroll,Javascript,Ios,Css,Iframe,Scroll,我有一个基本html文件，其中包含一个iFrame，它应该作为“webview”使用。这个iframe应该具有移动屏幕区域的精确区域，但是随着iOS框架扩展到其内容，任何绝对定位的内容都会变得怪异。我能够用一个（有点笨重的）解决方案来解决这个问题，使框架的html具有固定的高度，并使主体具有固定的位置和溢出：auto （固定位置防止了滚动上的闪烁）问题是：现在帧上侦听window.scroll（）的任何内容都不再工作，而且，窗口也不再滚动了。：）我想做这样的东西：侦听$（'body'）.s

我有一个基本html文件，其中包含一个iFrame，它应该作为“webview”使用。这个iframe应该具有移动屏幕区域的精确区域，但是随着iOS框架扩展到其内容，任何绝对定位的内容都会变得怪异。我能够用一个（有点笨重的）解决方案来解决这个问题，使框架的html具有固定的高度，并使主体具有固定的位置和溢出：auto

（固定位置防止了滚动上的闪烁）

问题是：现在帧上侦听window.scroll（）的任何内容都不再工作，而且，窗口也不再滚动了。：）

我想做这样的东西：

侦听$（'body'）.scroll事件，然后在$（窗口）上伪造触发器。使用body scrollLeft/scrollTop滚动事件。在不实际滚动窗口的情况下（在我的场景中这是不可能的），是否有办法实现这一点

我的测试文件如下：

基本html：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    body {
        padding:0;
        margin:0;
    }
    iframe {
        position: relative;
        height:500px;
        border:none;
        width: 100%;
    }
</style>
<body>
    <iframe scrolling="no" src="teste2.html" height="500"></iframe>
</body>
</html>


身体{
填充：0；
保证金：0；
}
iframe{
位置：相对位置；
高度：500px；
边界：无；
宽度：100%；
}

以及iframe：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    html {
        overflow:auto;
        height:500px;
    }
    body {
        position:fixed;
        overflow:auto;
        -webkit-overflow-scrolling:touch;
        width:100vw;
        height:500px;
        padding:0;
        margin:0;    
    }
    .wrapper {
        height:2000px;
        background:green;
    }
    .footer {
        position: fixed;
        width:100%;
        bottom:0;
        left:0;
        height:50px;
        background:red;
        z-index:20;
    }
</style>
<body>
   <div class="wrapper"></div>
   <div class="footer"></div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script>
        $('document').ready(function(){
            $('.wrapper').css('background','blue');

        });

        $(window).scroll(function(){
            console.log($(window).scrollTop());
            if ($(window).scrollTop() > 200) { 
                $('.wrapper').css('background','yellow');
            }
        });     
   </script>
</body>
</html>


html{
溢出：自动；
高度：500px；
}
身体{
位置：固定；
溢出：自动；
-webkit溢出滚动：触摸；
宽度：100vw；
高度：500px；
填充：0；
保证金：0；
}
.包装纸{
高度：2000px；
背景：绿色；
}
.页脚{
位置：固定；
宽度：100%；
底部：0；
左：0；
高度：50px；
背景：红色；
z指数：20；
}
$（'document'）.ready（函数（）{
$（'.wrapper'）.css（'background'，'blue'）；
});
$（窗口）。滚动（函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>200）{
$（'.wrapper'）.css（'background'，'yellow'）；
}
});

非常感谢你的帮助。如果您需要更多信息，请帮助我更好地描述这个问题。

您找到解决方案了吗？没有，还没有。我们最终决定不将iframe用作iOS应用程序的网络视图：/