王者荣耀：修改自定义盒子的滚动条样式，超实用！

  1.滚动条组成

  ::-webkit-scrollbar 滚动条整体部分

  ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

  ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

  ::-webkit-scrollbar-button 滚动条的轨道的两端按钮css改变滚动条颜色，允许通过点击微调小方块的位置。

  ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

  ::-webkit-scrollbar-corner 边角css改变滚动条颜色，即两个滚动条的交汇处

  ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

  2.修改浏览器的滚动条样式

  heml代码

  css代码

` .box{
 height: 2000px;
 }
 /* 滚动条的整体样式 */
 ::-webkit-scrollbar{
  width: 8px;
  height: 8px;
 }
 /* 滚动条的滚动轨迹 */
 ::-webkit-scrollbar-track{
  border-radius: 8px;
  background-color: hotpink;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;
 }
 /* 滚动条上面的小滑块 */
 ::-webkit-scrollbar-thumb{
  border-radius: 8px;
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  background-color: pink;
 }`

  3.修改自定义盒子的滚动条样式

  html代码

`
 ##muzidigbig 
这是内容111

    这里是内容222

    这里是内容333

 
`

  css代码

` .inner{
 width: 265px;
  height: 400px;
  position: absolute;
  top: 33px;
  left: 13px;
  /*cursor: pointer;*/
  overflow:hidden;
 }
 .innerbox{
  overflow-x: hidden;
  overflow-y: auto;
  color: #000;
  font-size: .7rem;
  font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
  height: 100%;
 }
 /*滚动条样式*/
 .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
 }
 /*滚动条的轨道*/
 .innerbox::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 5px;
  background: rgba(0,0,0,0.1);
 }
 /*滚动条里面小滑块*/
 .innerbox::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
 }`

  若有不足请多多指教！希望给您带来帮助！