【问题标题】:Why horizontal scrollbar appears?为什么会出现水平滚动条?
【发布时间】:2021-07-13 13:35:23
【问题描述】:

我的网站由具有这些样式的部分组成:

.site-section{
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

当我打开网站时,会出现一个水平滚动条。我用::-webkit-scrollbar {display: none;} 隐藏了它,但这不是一个好的解决方案,因为并非所有浏览器都支持它。你知道为什么会出现这个问题吗?

【问题讨论】:

  • 每页是否有超过 1 个部分?如果页面的高度超过 100vh,它将显示一个滚动条。这可能是<body> 的默认边距或任何其他原因。您可以右键单击您的页面并“检查”它以突出显示每个容器的表面,以更好地了解所有内容的放置位置以及导致额外高度的原因。
  • @leuquim,滚动条是因为body和html标签有边距和内边距造成的。

标签: html css scrollbar


【解决方案1】:

如果没有看到更多代码上下文,最可能的解释是您让浏览器使用其默认设置,这些设置可能包括边距和填充。

如果是这样,那么即使你只有这个元素作为第一个元素,它或主体,或两者等都会使你的元素移动一点,宽度为 100vw,这意味着它太宽了和/或高视口,因此出现滚动条。

把它放在你的 CSS 的顶部,看看它是否对你的特定场景有影响:

* {
  margin: 0;
  padding: 0;
}

【讨论】:

    【解决方案2】:

    水平滚动条是由你的 CSS 引起的:width: 100vw;

    要删除它,请将声明 overflow-x: hidden; 放在您的正文标签上。

    【讨论】:

      【解决方案3】:

      你的水平滚动条是因为你的site-section有100vw的宽度。浏览器对此很好,但它也考虑了边距和填充(蓝色和红色)。

      这会导致溢出,因此浏览器会添加一个水平滚动条(以及一个垂直滚动条);

      解决此问题的最佳方法是使用calc

      .site-section{
        background-color: lightblue; /* I added this so you can see the new extents of the .site-section */
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
      }
      <div class = 'site-section'>
        Hello world
      </div>

      【讨论】:

        猜你喜欢
        • 2021-09-22
        • 2015-10-27
        • 1970-01-01
        • 2021-12-31
        • 2019-08-17
        • 1970-01-01
        • 1970-01-01
        • 2012-08-29
        • 1970-01-01
        相关资源
        最近更新 更多