CSS隐藏滚动条，设置滚动条样式

原创已于 2025-03-28 14:03:57 修改 · 3.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-12-12 10:58:38 首次发布

本文介绍了两种方法来隐藏Web页面的滚动条：一是利用CSS伪类在Chrome/Safari中隐藏，二是通过外部布局在Firefox和IE10中实现。分别展示了代码示例和滚动条样式的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章已经生成可运行项目，

方法1：使用样式表（注意兼容性）

::-webkit-scrollbar 使用伪类隐藏滚动条（仅限Chrome与Safari）
scrollbar-width: none;（仅限firefox）
-ms-overflow-style: none;（仅限IE 10+）

overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
	display: none;
}

/* 隐藏滚动条 */
.element {
   overflow: scroll;
   scrollbar-width: none;
   -ms-overflow-style: none;
}
.element::-webkit-scrollbar {
    display: none;
}

方法2：使用布局遮挡滚动条

可滚动的容器外层再签套一个父盒子，父盒子设置overflow:hidde，再配合position，变相隐藏滚动条

 <div class="outer-container">
     <div class="inner-container">
     </div>
 </div>

.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; 
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}

设置滚动条样式

/* 伪元素用于设置滚动条的宽度 */
::-webkit-scrollbar {
  width: 8px;
}

/* 设置滚动条的轨道样式，例如背景颜色和边框样式 */
::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

/* 设置滚动条的滑块样式，例如背景颜色、边框样式和圆角半径 */
::-webkit-scrollbar-thumb {
  background-color: #000000;
  border-radius: 4px;
}
```