CSS 自定义滚动条样式的方法

scrollbar-color

将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道(只在火狐中生效)

html,
body {
  width: 100%;
  height: 100%;
  scrollbar-color: green red;
}

scrollbar-width

允许开发者设置滚动条出现时的厚度(只在火狐中生效)

auto：系统默认的滚动条宽度
thin：系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度
none：不显示滚动条，但是该元素依然可以滚动

-webkit-scrollbar

仅在支持 WebKit 的浏览器 (例如, 谷歌 Chrome, 苹果 Safari)可以使用.
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 16px;
  /*background: red;*/
  visibility: hidden;
}

html:hover ::-webkit-scrollbar {
  visibility: visible;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: lightgoldenrodyellow;
  border-radius: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: lightcoral;
  border-radius: 10px;
}