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

芝芝葡萄

已于 2024-01-04 21:13:27 修改

阅读量1.4k

点赞数 10

文章标签： css 前端

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

本文链接：https://blog.csdn.net/qq_41064597/article/details/134943815

版权

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

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

/* 隐藏滚动条 */
.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;
}
```