为什么会出现水平滚动条？

Question

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

React.Component

当我打开网站时，会出现一个水平滚动条。我用 .site-section{ background-repeat: no-repeat; background-attachment: fixed; background-size: cover; width: 100vw; height: 100vh; } 隐藏了它，但这不是一个好的解决方案，因为并非所有浏览器都支持它。你知道为什么会出现这个问题吗？

Answer 1

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

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

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

* {
  margin: 0;
  padding: 0;
}

Answer 2

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

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

Answer 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>