使用场景

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