菜鸟教程小白 发表于 2022-12-12 12:05:47

android - 移动(android 和 ios)浏览器忽略了隐藏在 body、html 和容器上的溢出


                                            <p><p>我的网站有一些叠加层(灯箱),当它们打开时,我需要防止页面在它们下方滚动。所以我使用了一点 jQuery 将 <code>overflow: hidden;</code> 添加到 <code>body</code>、<code>html</code>、<code>#page</code>。这在桌面浏览器上运行良好,但移动浏览器似乎不遵守规则。</p>

<p>我的页面结构是:</p>

<pre><code>&lt;html&gt;
   ...
   &lt;body&gt;
          &lt;div id=&#34;page&#34;&gt;
          ...
          &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>我的 jQuery 只是在单击触发器时将类放在三个元素上。 jQuery 正在工作(应用样式),我没有收到任何错误。</p>

<p>是否存在已知错误和/或已知修复?</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>使用大致相同的想法,但设置一个类 <code>noscroll</code> 而不是直接将样式应用于元素。</p>

<pre><code>.noscroll { overflow: hidden; }
</code></pre>

<p>如果我没记错的话,它曾经可以工作,直到 iOS 7。</p>

<p>做了一些实验,看来这可以解决问题。</p>

<pre><code>.noscroll { overflow: hidden; position: fixed; }
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于android - 移动(android 和 ios)浏览器忽略了隐藏在 body、html 和容器上的溢出,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/26288938/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/26288938/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: android - 移动(android 和 ios)浏览器忽略了隐藏在 body、html 和容器上的溢出