小编利用场景

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

html纵向滚动条前端css属性滚动条scrollbar样式 Node.js

全局样式

{ 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; }}