如何隐藏滚动条

学习如何使用 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 也会删除滚动条的功能。无法在页面内进行滚动。

隐藏滚动条但保留功能

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

实例

/* 为 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 属性，这些属性允许我们隐藏滚动条但保留其功能。

相关页面

教程：CSS 溢出

参考手册：CSS overflow 属性