如何做 - 隐藏滚动条
❮ 上一页 下一页 ❯
学习如何使用 CSS 隐藏滚动条。
如何隐藏滚动条
添加 overflow: hidden; 来同时隐藏水平和垂直滚动条。
示例
body { overflow: hidden; /* 隐藏滚动条 */}
自己动手试一试 »
如果只想隐藏垂直滚动条或只想隐藏水平滚动条，请使用 overflow-y 或 overflow-x。
示例
body { overflow-y: hidden; /* 隐藏垂直滚动条 */ overflow-x: hidden; /* 隐藏水平滚动条 */}
自己动手试一试 »
请注意，overflow: hidden 也会移除滚动条的功能。将无法在页面内滚动。
提示：要了解有关 overflow 属性的更多信息，请访问我们的 CSS Overflow 教程 或 CSS overflow 属性参考。
隐藏滚动条但保留功能
要隐藏滚动条，但仍能继续滚动，您可以使用以下代码
示例
/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */.example::-webkit-scrollbar { display: none;}/* 隐藏 IE、Edge 和 Firefox 的滚动条 */.example { -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; /* Firefox */}
自己动手试一试 »
Webkit 浏览器（如 Chrome、Safari 和 Opera）支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改浏览器滚动条的外观。IE 和 Edge 支持 -ms-overflow-style: 属性，Firefox 支持 scrollbar-width 属性，这些属性允许我们隐藏滚动条，但保留其功能。
❮ 上一页 下一页 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册