.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* Demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */}/* Add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; }

相关推荐：CSS教程

以上就是css怎么设置滚动条宽度的详细内容，更多请关注聚合云库其它相关文章！

::-webkit-scrollbar-track — 滚动条轨道

本文适用于所有品牌的电脑。

方法思路如下：

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分

实现代码：

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

css设置滚动条宽度的方法：首先使用【::-webkit-scrollbar】伪类选择器设置滚动条样式；然后在该伪类选择器中通过width属性设置滚动条宽度即可。

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块

环境：

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)

在CSS中使用::-webkit-scrollbar伪类选择器来设置滚动条样式，并在此伪类选择器中通过width属性设置滚动条的宽度。

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式。

::-webkit-scrollbar — 整个滚动条

（学习视频分享：css视频教程）