论坛 › 知识问答 › ios - 无法在 iPhone 上滚动 heroku 维护页面

菜鸟教程小白 发表于 2022-12-13 03:58:03

ios - 无法在 iPhone 上滚动 heroku 维护页面

                                            <p><p>我的 Heroku 应用程序上有一个自定义维护页面，但我无法在我的 iphone 上滚动它(在 safari 或 chrome 上都没有)。它可以在网络(safari、甚至响应模式和 chrome)和 Android 手机上正常工作。</p>

<p>问题是 Heroku 使用以下代码将我的页面加载到 <code>iframe</code> 中:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
    &lt;meta charset=&#34;utf-8&#34;&gt;
    &lt;title&gt;Offline for Maintenance&lt;/title&gt;
    &lt;style media=&#34;screen&#34;&gt;
      html,body,iframe {
      margin: 0;
      padding: 0;
      }
      html,body {
      height: 100%;
      overflow: hidden;
      }
      iframe {
      width: 100%;
      height: 100%;
      border: 0;
      }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
      &lt;iframe src=&#34;//s3.amazonaws.com/cf-udon-maintenance-page/index.html&#34;&gt;
      // Here goes my page
      &lt;/iframe&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>这是在 iOS 上破坏滚动的部分，如果我在 Debug模式下取消设置此属性，则滚动开始工作</p>

<pre><code>html,body {
   overflow: hidden;
}
</code></pre>

<p>由于我在 <code>iframe</code> 内部，我无法访问它来覆盖它，而且我还没有找到从 <code>iframe</code> 内部修复它的方法.</p>

<p>有什么想法吗？
我确定这以前没有发生过，这是 Heroku 最近的变化吗？</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>如果您只能编辑 I 框架内的内容，请尝试以下代码。<br/>
在样式中添加，</p>

<pre><code>html, body, .wrapper{
    height: 100%;
}

.footer{
    position: unset;
}

.wrapper{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
</code></pre>

<p>并在body标签正下方添加一个包装器</p>

<pre><code>&lt;body&gt;
&lt;div class=&#34;wrapper&#34;&gt;
    &lt;!-- Fixed navbar --&gt;
    &lt;nav class=&#34;navbar navbar-default navbar-fixed-top&#34;&gt;
    &lt;/nav&gt;

    &lt;div class=&#34;jumbotron&#34;&gt;
      &lt;h1&gt;Dang It&lt;/h1&gt;
    &lt;/div&gt;

    &lt;!-- Begin page content --&gt;
    &lt;div class=&#34;container&#34;&gt;
    &lt;/div&gt;

    &lt;footer class=&#34;footer&#34;&gt;
    &lt;/footer&gt;
&lt;/div&gt;
&lt;body&gt;
</code></pre>

<p> <a href="https://jsfiddle.net/dknfmqaL/" rel="noreferrer noopener nofollow">https://jsfiddle.net/dknfmqaL/</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 无法在 iPhone 上滚动 heroku 维护页面，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/48624670/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/48624670/
                                                        </a>
                                                </p>
                                       

查看完整版本: ios - 无法在 iPhone 上滚动 heroku 维护页面