如果你遇到类似情况

在火狐(Firefox)中中滚动条占元素的位置且非常丑，多半是因为 overflow-x: scroll溢出滚动而忘了隐藏滚动条，例如下面

我们找到含有overflow-x: scroll 样式的位置的在添加添加 scrollbar-width: none; 就能正常了, 如下图

在有些必要显示滚动条的地方,也可以添加 scrollbar-width: thin;让滚动条变瘦一点~ 会更好看

扩展一些属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 隐藏水平滚动条 */
body {
  overflow-x: hidden;
}

/* 自定义垂直滚动条样式（可选） */
body::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
}

body::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滚动条滑块颜色 */
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滑块悬停时颜色 */
}

/* Firefox 中隐藏滚动条 */
body {
  scrollbar-width: none; /* 隐藏滚动条 */
}

这段 CSS 代码将隐藏页面的水平滚动条，并自定义了垂直滚动条的样式（可选）。最后一行代码 scrollbar-width: none; 是 Firefox 特定的属性，用于隐藏滚动条。

请注意，scrollbar-width 属性在一些旧版本的 Firefox 中可能不支持。如果需要兼容性，可以使用 -moz-scrollbar-width 属性来设置滚动条的宽度为0，实现类似的效果：

1
2
3
4
5
6
7
8
9
10
11
12
/* Firefox 中隐藏滚动条的兼容性写法 */
body {
  scrollbar-width: thin; /* 设置滚动条宽度为最小值 */
}

body::-webkit-scrollbar {
  display: none; /* Chrome 和 Safari 中隐藏滚动条 */
}

body {
  -ms-overflow-style: none; /* IE/Edge 中隐藏滚动条 */
}

这段代码中，scrollbar-width: thin; 将滚动条宽度设置为最小值，以达到隐藏滚动条的效果。-ms-overflow-style: none; 则用于隐藏滚动条在 IE/Edge 浏览器中。

请根据你的需求选择适合的方法，并将对应的 CSS 代码添加到你的样式表中。