如何 - 隐藏滚动条

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

如何隐藏滚动条

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

示例

body {
overflow: hidden; /* Hide scrollbars */
}

亲自试一试 »

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

示例

body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}

亲自试一试 »

注意overflow: hidden还将删除滚动条的功能。无法在页面内滚动。

提示：要了解更多有关overflow属性，去我们的CSS 溢出教程或者CSS 溢出属性参考。

隐藏滚动条但保留功能

要隐藏滚动条，但仍然能够继续滚动，可以使用以下代码：

示例

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and 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属性，它允许我们隐藏滚动条，但保留功能。