如何创建 - 隐藏滚动条
了解如何使用 CSS 隐藏滚动条。
如何隐藏滚动条
添加 overflow: hidden;
隐藏水平和垂直滚动条。
要仅隐藏垂直滚动条,或仅隐藏水平滚动条,请使用 overflow-y
或 overflow-x
:
注意 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
属性 ,它允许我们隐藏滚动条,但保留功能。