设置滚动条样式 ::-webkit-scrollbar

1 背景

今天收到一个需求，需要在手机app的弹框中展示滚动条的样式

2 方式

2.1 通过【伪元素选择器】修改滚动条样式

::-webkit-scrollbar — 整个滚动条
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
::-webkit-scrollbar-track — 滚动条轨道
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

2.2 示例

.alerttitleBox::-webkit-scrollbar {
  display: inline-block;
  width: 4px !important;
  height: 4px !important;
  background-color: #eee;
  background-clip: content-box;
}
.alerttitleBox::-webkit-scrollbar-thumb,
.alerttitleBox::-webkit-scrollbar-thumb:hover,
.alerttitleBox::-webkit-scrollbar-thumb:active {
  background-color: #ccc;
  border-radius: 2px;
  border: 4px solid transparent;
  background-clip: content-box;
}

3 安卓和ios区别

3.1 安卓表现

① 正常展示

3.2 ios表现

① 首次展示会不显示滚动条，不显示滚动条轨道
② 滑动后展示滚动条，不显示滚动条轨道
③ 松手后一会儿又不展示滚动条了，且显示滚动条轨道