隐藏滚动条

---

了解如何使用 CSS 隐藏滚动条。

---

如何隐藏滚动条

添加 overflow: hidden; 隐藏水平和垂直滚动条。

实例

body {
  overflow: hidden; /* 隐藏滚动条 */
} 亲自试一试 »

要仅隐藏垂直滚动条，或仅隐藏水平滚动条，请使用 overflow-y 或 overflow-x:

实例

body {
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
} 亲自试一试 »

注意 overflow: hidden 也会移除滚动条的功能。 无法在页面内滚动。

提示:要了解有关 overflow 属性的更多信息，请访问我们的 CSS 溢出教程 或 CSS 溢出属性参考。

---

隐藏滚动条但保留功能

要隐藏滚动条，但仍能保持滚动，可以使用以下代码:

实例

/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.example::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 亲自试一试 »

Webkit 浏览器，例如 Chrome、Safari 和 Opera，支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改外观 浏览器的滚动条。 IE 和 Edge 支持 -ms-overflow-style: 属性，Firefox 支持 scrollbar-width 属性 ，它允许我们隐藏滚动条，但保留功能。