【问题标题】:I have 2 scrolls bar on my page , can't figure out why我的页面上有 2 个滚动条,不知道为什么
【发布时间】:2022-06-15 17:31:09
【问题描述】:

我现在创建一个网站已经很长时间了。我用它做的最后一件事是让它在我的第二台较小的笔记本电脑上响应媒体查询。但是,我注意到当我在主计算机上打开该站点时出现了另一个滚动条。 2 个右侧滚动条不相关。

整个网站都在一个文件夹中,所以我不能真正共享 HTML/CSS 代码。首先,我想知道是否有人已经遇到过这种问题,并且可以建议我从哪里开始解决它。我猜我可能在 CSS 中创建了许多 body/html 规则?

谢谢!

【问题讨论】:

    标签: html css scrollbar


    【解决方案1】:

    所以基本上你在你的 div 上启用了溢出,默认值为 body。 因此你看到了 2 个滚动条。一个 div 和一个 body。

    如果您通过禁用默认的 body 滚动条并保持 div 在 y 轴上可溢出来解决这个问题,那就太好了。

    【讨论】:

      【解决方案2】:

      不久前我也遇到过类似的问题。
      为了获得更好的答案,我应该阅读代码,但我可以告诉您应该从哪里开始寻找问题。 这可能是因为您页面中的 div 具有诸如“overflow-y: auto”之类的规则,并且它的父级本身大于当前页面高度。

      .container1 {
        background-color: red;
        height: 10000px;
        width: 100%;
      }
      .container2 {
        background-color: blue;
        height: 100vh;
        width: 100%;
        overflow-y: auto;
      }
      
      .container3 {
        background-color: green;
        height: 10000px;
        width: 50px;
      }
      <div class="container1">
        <div class="container2">
          <div class="container3">
          
          </div>
        </div>
      </div>

      我做了一个快速的 sn-p,您可以执行以更好地了解正在发生的事情。

      我希望这可以帮助您找到问题。

      【讨论】:

      • 非常感谢。您所描述的内容可能让我很担心,因为我在不同的页面中有很多这样的划分。 95% 肯定它来自这个,我会尽快检查并告诉你它是否解决了我的问题。非常感谢您的答案和代码。我会和你保持联系!
      【解决方案3】:

      终于解决了。我不得不手动将

      【讨论】:

      • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-01-24
      • 1970-01-01
      • 2018-02-13
      • 1970-01-01
      • 2021-09-24
      • 1970-01-01
      相关资源
      最近更新 更多