滚动条样式

效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200529162542723.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3Mjk0NjM0,size_16,color_FFFFFF,t_70

代码

"nickname_box">
              @click="showChange">{{showStudent ? "隐藏学员" : "显示学员"}}
              
"nickname_list">
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
                "sp">sss
              
            

.nickname_box {
  display: flex;
  .nickname_list {
    margin-left: 0.2rem;
    width: 80%;
    overflow: scroll;
    white-space: nowrap;
    span.sp {
      padding: 0.05rem 0.1rem;
      border: 1px solid #ccc;
      margin-left: 0.1rem;
    }
    span.sp:first-child {
      margin-left: 0;
    }
  }
}
.nickname_list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0.6rem; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0.04rem;
}
.nickname_list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0.05rem;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
  background: rgb(246, 247, 245);
}