大家好，欢迎来到IT知识分享网。

使用场景

::-webkit-scrollbar 只支持WebKit的浏览器 (谷歌Chrome, 苹果Safari)可以使用。

全局样式

* { scrollbar-width: thin; // auto -浏览器默认滚动条宽度 // thin -设置比默认滚动条更窄的宽度 // none -隐藏滚动条，但是元素还可以滚动 // **px -直接设置滚动条的宽度 } // 垂直滚动条和水平滚动条相交的部分 ::-webkit-scrollbar-corner { display: none; width: 0; height: 0; } // 整个滚动条 ::-webkit-scrollbar { width: 5px; // 宽度 height: 5px; // 高度 background-color: #a7b1c2; // 颜色 } // 滚动条上的滚动滑块。 ::-webkit-scrollbar-thumb { width: 6px; height: 6px; background: rgba(0, 0, 0, 0.1); background-clip: padding-box; border: 2px solid transparent; border-radius: 6px; } // 滚动条上的按钮（上下箭头）。 ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } // 滚动条轨道 ::-webkit-scrollbar-track { display: none; } // 滚动条没有滑块的轨道部分。 ::-webkit-scrollbar-track-piece { display: none; } // 右下角拖动块（如：textarea的可拖动按钮） ::-webkit-resizer { background: #991d28; } 

局部样式

 /* 局部样式 */ 可把当前属性都放入某个dom元素里，就是针对当前dom进行设置滚动条样式 <div class="box"> <div class="box-info"> <p class="box-info__content">内容....</p> </div> </div> less等写法 .box { overflow-y: scroll; overflow-x: hidden; width: 100%; heighjt: 200px; ::-webkit-scrollbar { width: 4px; // 宽度 height: 20px; // 高度 background-color: pink; // 颜色 } &-info { font-size: 14px; } }