滚动条样式

最新推荐文章于 2024-09-29 21:43:16 发布

张闹闹

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量162

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_47294634/article/details/106428065

版权

效果

在这里插入图片描述

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

代码

<el-col class="nickname_box">
              <el-button @click="showChange">{{showStudent ? "隐藏学员" : "显示学员"}}</el-button>
              <div class="nickname_list">
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
                <span class="sp">sss</span>
              </div>
            </el-col>

.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);
}